Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
152 lines (103 sloc) 2.87 KB

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 for composition
  • Structural CSS
  • Fluent API

Events

  • add (item) when an item is added
  • remove (item) when an item is removed
  • select (item) when an item is selected

Example

Message Template:

<script type="text/template" id="message">
  <a href='#'>
    <span class='from'>{{from}}</span>
    <span class='subject'><strong>{{subject}}</strong></span>
    <span class='message'><small>{{message}}</small></span>
  </a>
</script>

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'); // <li><a href="#">apple</a></li>

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