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">
<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>

JavaScript

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