Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Generic list component
JavaScript
tag: 0.0.2

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples/inbox
test
.gitignore
History.md
Makefile
Readme.md
component.json
list.css
list.js

Readme.md

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

  • Custom templating support, defaulting to minstache.
  • 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 new list item(s). 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

Something went wrong with that request. Please try again.