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">
    <people></people>
</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"}
];

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