This repository is a mirror of the component module matthewmueller/list. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/matthewmueller-list
. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.
list
Generic list component, based on the menu component.
Useful for creating inboxes, contact lists, etc.
Installation
$ component install matthewmueller/list
Features
- Events for composition
- Structural CSS
- Fluent API
Events
add
(item) when an item is addedremove
(item) when an item is removedselect
(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