CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by donejs

HTML

<script src="http://canjs.com/release/2.0.1/can.jquery.js"></script>
<script src="http://canjs.com/release/2.0.1/can.ejs.js"></script>
<script src="http://canjs.com/release/2.0.1/can.fixture.js"></script>
<script src="http://canjs.com/release/2.0.1/can.object.js"></script>
<div id='tasks'></div>



<!-- TEMPLATES -->
<script id="tasksEJS" type="text/ejs">
<div id='duetoday'>
    <h2>Due Today</h2>
    <ul>
    <% list( todaysTasks, function( task ) { %>
      <li <%= (el) -> el.data( 'task', task ) %>>
        <input type='checkbox' 
          <%= task.attr("complete") ? "checked" : "" %>/>
          <%= task.attr( 'name' ) %>
      </li>
    <% }) %>
    </ul>
</div>
<div id='duetoday'>
    <h2>Critical Todos</h2>
    <ul>
    <% list( criticalTasks, function( task ) { %>
      <li <%= (el) -> el.data( 'task', task ) %>>
          <input type='checkbox' <%= task.attr("complete") ? "checked" : "" %>/>
        <%= task.attr( 'name' ) %>
      </li>
    <% } ) %>
    </ul>
</div>
</script>

CSS

h2 {
    font-size: 24px;
    font-weight: bold;
}

JavaScript

(function() {
    // Setup a fixture to return tasks due today
    // or critical tasks.  Make sure there is overlap.
    can.fixture("/tasks", function(settings){
        if( settings.data.due === "today"){
            return [
                { id: 5, name: "do dishes", 
                  due: "today", type: "critical", 
                  complete: false },
                { id: 6, name: "wash clothes",
                  due: "today", type: "important",
                  complete: false },
                { id: 7, name: "mow lawn",
                  due: "today", type: "minor",
                  complete: true },
            ];
        }  else {
            return [
                { id: 5, name: "do dishes",
                  due: "today", type: "critical",
                  complete: false },
                { id: 8, name: "buy groceries",
                  due: "sunday", type: "critical",
                  complete: true },
                { id: 9, name: "workout",
                  due: "tomorrow", type: "workout",
                  complete: false },
            ];
        
        }
    });
    
    // A task model used to retreive tasks
    var Task = can.Model.extend({
        findAll : "/tasks"
    },{})
    
    // render tasksEJS when critical and and todays tasks
    // have been loaded
    can.view("tasksEJS",{
        criticalTasks : Task.findAll({type: "critical"}),
        todaysTasks : Task.findAll({due: "today"})
    }).then(function(frag){
        $("#tasks").html(frag);
    });
    
    // listen for when an input changes
    // and update the task
    $("#tasks").delegate("input","change", function(){
        var checkbox = $(this);
        // get the task instance from $.data
        checkbox.parent().data("task")
            // update it's complete property
            .attr("complete",  checkbox.prop("checked"));
    })
        
})();