<script type="text/mustache" id="app-template"> <people></people> </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"} ]; can.Component.extend({ tag: 'people', template: '<ul>' + '{{#each people}}' + '<li can-click="remove">' + '{{lastname}}, {{firstname}}' + '</li>' + '{{/each}}' + '</ul>', scope: { people: people, remove: function( person ) { var people = this.attr("people"); var index = people.indexOf(person); people.splice(index, 1); } } }); var frag = can.view("app-template", {people: people}); $("#my-app").html(frag);