HTML and CSS Reference
In-Depth Information
}, errorLogger);
We will also make a slight change to the loadTasks method in tasks-controller.js to ensure
incomplete tasks have the complete property set to false when the table loads:
loadTasks : function() {
$(taskPage).find('#tblTasks tbody').empty();
storageEngine.findAll('task', function(tasks) {
$.each(tasks, function(index, task) {
if (!task.complete) {
task.complete = false;
$('#taskRow').tmpl(task).appendTo( $(taskPage).find( '#tblTasks tbody'));
}, errorLogger);
The next step is to have the template check for completed tasks. If a task is completed, the
td elements will be given the class taskCompleted , and the complete and edit buttons will
not be displayed. This was why we needed to set the completed property on all tasks - the
template engine will error if undefined properties are accessed:
<script id="taskRow" type="text/x-jQuery-tmpl">
<td {{if complete == true}}class="taskCompleted"{{/if}}>${task}</td>
<td {{if complete == true}}class="taskCompleted"{{/if}}>${category}</td>
{{if complete != true}}
<a href="#" class="editRow" data-task-id="${id}">Edit</a>
<a href="#" class="completeRow" data-task-id="${id}">Complete</a>
Search WWH ::

Custom Search