CanJS Recipes Template

by donejs

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http:////canjs.com/release/2.0.4/can.jquery.js"></script>
<script type="text/mustache" id="app-template">
<ul>
{{#each people}}
    <li {{data 'person'}}>
	{{lastname}}, {{firstname}}
    </li>
{{/each}}
</ul>  
</script>
<!-- CanJS needs a place to put your application -->
<div id="my-app"></div>

JavaScript

var people = [
    {firstname: "John", lastname: "Doe"},
    {firstname: "Emily", lastname: "Dickinson"},
    {firstname: "William", lastname: "Adams"},
    {firstname: "Stevie", lastname: "Nicks"},
    {firstname: "Bob", lastname: "Barker"}
];

var PeopleList = can.Control.extend({
    init: function( el, op ){
         this.options.people = new can.List(op.people);
         this.element.html( can.view('app-template', {
             people: this.options.people
        }));
    },
    'li click': function( li, event ) {
           var people = this.options.people;
           var person = li.data('person');
           var index = people.indexOf(person);
           people.splice(index, 1);
    }
});
         
new PeopleList('#my-app', {people: people});