AFrameJS - Javascript MVC Library - API: AFrame → AFrame.List class

class AFrame.List class extends AFrame.Display

A generic HTML list class. A list is any list of data. A List shares the majority of its interface with a CollectionArray since lists are inherently ordered (even if they are ULs). There are two methods for inserting an item into the list, either passing an already created element to insertElement or by passing data to insert. If using insert, a factory function (renderItem) must be specified in the configuration. The factory function can either create an element directly or use some sort of prototyping system to create the element. The factory function must return the element to be inserted.

<ul id="clientList">
</ul>

---------
// Set up a factory to create list elements.  This can create the elements
// directly or use sort of templating system.
var factory = function( data, index ) {
   var listItem = AFrame.DOM.createElement( 'li', data.name + ', ' 
      + data.employer );
   return listItem;
};

var list = AFrame.List.create( {
    target: '#clientList',
    renderItem: factory
} );

// Creates a list item using the factory function, item is inserted
 // at the end of the list
list.insert( {
   name: 'Shane Tomlinson',
   employer: 'AFrame Foundary'
} );

// Inserts a pre-made list item at the head of the list
list.insertRow( AFrame.DOM.createElement( 'li', 'Joe Smith, the Coffee' +
  ' Shop' ), 0 );
---------

<ul id="clientList">
   <li>Joe Smith, The Coffee Shop</li>
   <li>Shane Tomlinson, AFrame Foundary</li>
</ul>

Uses…

Constructor

Constructor	Parameters	Returns
`AFrame.List( )`

Methods

Methods	Returns	Description
`clear( )`	`void`	↑ Clear the list
`forEach( callback, context )`	`void`	↑ Call a callback for each element in the list. The callback will be called with the rowElement and the index Parameters: `callback <function>` callback to call `context <object>` (optional) - context to call the callback in
`insert( data, index )`	`number`	↑ Insert a data item into the list, the list item is created using the renderItem. // Creates a list item using the factory function, // item is inserted at the end of the list. list.insert( { name: 'Shane Tomlinson', employer: 'AFrame Foundary' } ); // Item is inserted at index 0, the first item in the list. list.insert( { name: 'Shane Tomlinson', employer: 'AFrame Foundary' }, 0 ); // Item is inserted at the end of the list list.insert( { name: 'Shane Tomlinson', employer: 'AFrame Foundary' }, -1 ); // Item is inserted two from the end list.insert( { name: 'Shane Tomlinson', employer: 'AFrame Foundary' }, -2 ); Parameters: `data <object>` data to use for list item `index <number>` (optional) - index to insert at If index > current highest index, inserts at end. If index is negative, item is inserted from end. -1 is at the end. If not given, inserts at end. Returns: `<number>` index the item is inserted at.
`insertElement( rowElement, index )`	`number`	↑ Insert an element into the list. `// Item is inserted at index 0, the first item in the list. list.insertElement( AFrame.DOM.createElement( 'li', 'Shane ' + 'Tomlinson, AFrame Foundary' ), 0 );` Parameters: `rowElement <element>` element to insert `index <number>` (optional) - index where to insert element. If index > current highest index, inserts at end. If index is negative, item is inserted from end. -1 is at the end. Returns: `<number>` index - the index the item is inserted at.
`remove( index )`	`void`	↑ Remove an item from the list `// Remove first item in the list. list.remove( 0 );` Parameters: `index <number>` index of item to remove
`renderItem( data, index )`	`Element`	↑ The factory used to create list elements. `// overriden renderItem renderItem: function( data, index ) { var listItem = AFrame.DOM.createElement( 'li', data.name + ', ' + data.employer ); return listItem; }` Parameters: `data <object>` data used on insert `index <number>` index where item should be inserted Returns: `<Element>` element to insert

Methods inherited from AFrame.ObservablesMixin

Methods	Notes
`bindEvent`	↑
`bindTo`	↑
`getEventObject`	↑
`isEventTriggered`	↑
`proxyEvents`	↑
`setEventData`	↑
`triggerEvent`	↑
`unbindAll`	↑
`unbindEvent`	↑
`unbindTo`	↑
`unbindToAll`	↑

Methods inherited from AFrame.ArrayCommonFuncsMixin

Methods	Notes
`addCreate`	↑
`AFrame.Class.walkChain`	↑
`Class`	↑
`getActualIndex`	↑
`getActualInsertIndex`	↑
`getCount`	↑

Methods inherited from AFrame.AObject

Methods	Notes
`addChild`	↑
`bindEvents`	↑
`checkRequired`	↑
`getCID`	↑
`getConfig`	↑
`init`	↑
`removeChild`	↑
`teardown`	↑
`triggerProxy`	↑

Methods inherited from AFrame.EnumerableMixin

Methods	Notes
`filter`	↑
`getCount`	↑
`search`	↑

Methods inherited from AFrame.Display

Methods	Notes
`bindClick`	↑
`bindDOMEvent`	↑
`bindDOMEvents`	↑
`getDOMElement`	↑
`getTarget`	↑
`render`	↑
`unbindDOMEvent`	↑
`unbindDOMEvents`	↑

Events

Events Description

Events	Description
`onInsert( options )`	↑ Triggered whenever a row is inserted into the list Parameters: `options <object>` information about the insert `options.rowElement <element>` row's element `options.data <object>` data that was inserted `options.index <object>` index where row was inserted
`onInsertElement( options )`	↑ Triggered whenever an element is inserted into the list Parameters: `options <object>` information about the insert `options.rowElement <element>` row's element `options.index <object>` index where row was inserted
`onRemoveElement( options )`	↑ Triggered whenever an element is removed from the list Parameters: `options <object>` information about the insert `options.rowElement <element>` row's element `options.index <object>` index where row was inserted


                          onInsert(
                          options
                          )

↑

Triggered whenever a row is inserted into the list

Parameters:

options <object>
- information about the insert
options.rowElement <element>
- row's element
options.data <object>
- data that was inserted
options.index <object>
- index where row was inserted


                          onInsertElement(
                          options
                          )

↑

Triggered whenever an element is inserted into the list

Parameters:

options <object>
- information about the insert
options.rowElement <element>
- row's element
options.index <object>
- index where row was inserted


                          onRemoveElement(
                          options
                          )

↑

Triggered whenever an element is removed from the list

Parameters:

options <object>
- information about the insert
options.rowElement <element>
- row's element
options.index <object>
- index where row was inserted

Events inherited from AFrame.AObject

Events	Notes
`onInit`	↑
`onTeardown`	↑

Events inherited from AFrame.Display

Events	Notes
`onRender`	↑

Configuration Attributes

Attributes	Type	Description
`renderItem`	`{function} (optional)`	↑ A function to call to create a list element. function will be called with two parameters, an data and index. If not specified, then the internal factory that returns an empty LI element will be used. See renderItem. Default value: `this.renderItem`

Configuration Attributes inherited from AFrame.AObject

Attributes	Notes
`{cid} cid`	↑

Configuration Attributes inherited from AFrame.Display

Attributes	Notes
`bindEvents`	↑
`target`	↑