<script type="text/mustache" id="app-template">
<button id="push">Add a new person to the list</button>
<button id="pop">Remove someone from the list</button>
<ul>
{{#each people}}
<li>
{{lastname}}, {{firstname}}
</li>
{{/each}}
</ul>
</script>
<!-- CanJS needs a place to put your application -->
<div id="my-app"></div>
var people = new can.List([
{firstname: "John", lastname: "Doe"},
{firstname: "Emily", lastname: "Dickinson"}
])
// pass the observable list into the can.view
var frag = can.view("app-template", {people: people})
$("#my-app").html(frag);
$("#push").click(function(){
people.push({firstname: "Paul", lastname: "Newman"})
})
$("#pop").click(function(){
people.pop();
})