<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>
(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")); }) })();
h2 { font-size: 24px; font-weight: bold; }