list

Generic list component, based on the menu component.

Useful for creating inboxes, contact lists, etc.

list example

inbox example

Installation

$ component install matthewmueller/list

Features

Events

Example

Message Template:



Usage:

var List = require('list'),
    inbox = new List,
    hogan = require('matthewmueller-hogan'),
    message = document.getElementById('message').text,
    tpl = hogan.compile(message);

inbox.template(tpl)

var messages = [
  { from : 'jim', subject : 'hey', message : 'blah'},
  { from : 'matt', subject : 'sup', message : 'cool'},
  { from : 'drew', subject : 'howdy', message : 'yah'},
]

inbox.add(messages, function(message) {
  console.log('invoked fn', message);
})

inbox.el.appendTo('body');

inbox.on('add', function(message) {
  console.log('message added:', message);
});

inbox.on('remove', function(message) {
  console.log('message removed:', message);
})

inbox.on('select', function(message) {
  console.log('message selected:', message);
});

inbox.add({
  from : 'zak',
  subject : 'no way',
  message : 'crazy'
});

inbox.remove(3);

API

List()

Create a new List:

var List = require('list');
var list = new List(); // or...
var list = List();

List#template(fn)

Add a template fn to be used when adding items.

List#add(arr | obj, [fn])

Add a new list item. Pass each obj into the templating function. When selected the optional callback fn will be invoked.

list.add({ name : 'apple' }, function(item) {
  console.log('You selected:', item.name);
})

List#unshift(arr | obj, [fn])

Add a new list item to the front of the list. Pass each obj into the templating function. When selected the optional callback fn will be invoked.

list.add({ name : 'apple' }, function(item) {
  console.log('You selected:', item.name);
})

You can also use arrays:

list.add([{ name : 'apple' }, { name : 'pear' }]);

You can also use text and the default template:

list.add('apple'); // 
  • apple
  • List#remove(i)

    Remove an item by it's place in the list

    list.remove(0);
    

    List.has(i)

    Checks to see if an item exists.

    list.has(1);
    

    License

    MIT