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">
    <h1>{{message}}</h1>
    <button id="change-value">Change message to "Goodbye, World"</button>
</script>

<!-- CanJS needs a place to put your application -->
<div id="my-app"></div>

JavaScript

// create an observable can.Map from the data
var data = new can.Map({message: "Hello World!"});

var frag = can.view("app-template", data);

//Load the DocumentFragment in the page
$("#my-app").html( frag );

$("#change-value").click(function(){
    data.attr("message", "Goodbye World!")
})