Hobo Cookbook

View Source

Rapid

<input-many>

Creates a sub-section of the form which the user can repeat using (+) and (-) buttons, in order to allow an entire has_many collection to be created/edited in a single form.

This tag is very different from tags like <select-many> and <check-many> in that:

  • Those tags are used to choose existing records to include in the association, while <input-many> is used to actually create or edit the records in the association.

Parameters

  • default
    • field-list
  • remove-item
  • add-item
  • empty-message
  • remove-item
  • add-item
  • default
    • field-list
  • remove-item
  • add-item
  • default
    • field-list
  • remove-item
  • add-item

Example

Say you are creating a new Category in your online shop, and you want to create some initial products in the same form, you can add the following to your form:

<input-many:products><field-list fields="name, price"/></input-many>

The body of the tag will be repeated for each of the current records in the collection, or will just appear once (with blank fields) if the colleciton is empty.

Attributes

  • fields: If you do not specify any content for the input-many, a <field-list> is rendered. This attribute is passed through to the <field-list>

  • skip: Passed through to the <field-list>. If not specified, it defaults to the parent association.

Example

Say you are creating a new Category in your online shop, and you want to create some initial products in the same form, you can add the following to your form:

<hjq-input-many:products fields="name, price" />

You’ll often want to provide the item parameter:

<hjq-input-many:products><item:><field-list fields="name, price" /></item:></hjq-input-many>

A fully worked up example of nested hjq-input-many’s may be found in agility/jquery-test

Attributes

  • minimum: the minimum number of items in the collection. Currently only ‘0’ and ‘1’ are supported values. The default is ‘0’.

  • fields, skip: passed down to the field-list tag in the default item.

  • template: the default values for new items. Normally this functionality is better provided by Model.new, but it’s here if you need it.

Events

  • rapid:add: fired after the element is inserted. memo.element is set to the new element inserted.

  • rapid:remove: fired before the element is inserted. memo.element is set to the element to be deleted. The removal may be cancelled by stopping the event.

  • rapid:change: fired after an element has been removed or inserted. memo.element set as above.

Example javascript:

  var last_added;
  var last_removed;
  Event.addBehavior({
    '.stories:rapid:add' : function(ev) {
      last_added = ev.memo.element;
    },
    '.stories:rapid:remove' : function(ev) {
      if(!confirm("really?")) ev.stop();
    }
  });

Note: if your javascript does not work, please ensure that you have the Hobo version of lowpro.js.

Show Source

Comments

No Comments to display