HTML and CSS Reference
In-Depth Information
},errorLogger);
}, 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'));
taskCountChanged();
renderTable();
});
}, 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">
<tr>
<td {{if complete == true}}class="taskCompleted"{{/if}}>${task}</td>
<td
{{if
complete
==
true}}class="taskCompleted"{{/if}}><time
date-
time="${requiredBy}">${requiredBy}</time></td>
<td {{if complete == true}}class="taskCompleted"{{/if}}>${category}</td>
<td>
<nav>
{{if complete != true}}
<a href="#" class="editRow" data-task-id="${id}">Edit</a>
<a href="#" class="completeRow" data-task-id="${id}">Complete</a>
{{/if}}
