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="toggle">Toggle</button>
  {{#if visible}}
    <h1>{{message}}</h1>
  {{/if}}
</script>

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

JavaScript

// Give message a value
var data = new can.Map({
    message: "Hello World!",
    visible: true
});

// Pass the id of the template and the data, containing our message to can.view
var frag = can.view("app-template", data );

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

$("#toggle").click(function(){
  data.attr("visible", ! data.attr("visible") );
})