Fork me on GitHub

AFrameJS

- Javascript MVC Library

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>

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

Events

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

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
target