<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>
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});