HTML and CSS Reference
In-Depth Information
Completing tasks
Next we will implement the “Complete task” functionality. If a task is completed we want to
render the text with a strike through it. This will be achieved with the following class from
.taskCompleted {
text-decoration: line-through;
We also need to store the fact that a task has been completed in the task itself, therefore we
will add a new property to a completed task called complete and set this to true when it is
The first step in the process is to change the complete buttons to have a class we can identify,
and make the task id accessible to them:
<script id="taskRow" type="text/x-jQuery-tmpl">
<td><time datetime="${requiredBy}"> ${requiredBy}</time></td>
<a href="#" class="editRow" data-task-id="${id}">Edit</a>
<a href="#" class="completeRow" data-task-id="${id}">Complete</a>
<a href="#" class="deleteRow" data-task-id="${id}">Delete</a>
Next, add a listener to these buttons. This will find the task that needs to be completed, saves
it with a completed property set to true , and redraw the table:
$(taskPage).find('#tblTasks tbody').on('click', '.completeRow', function(evt) {
storageEngine.findById('task', $(, function(task) {
task.complete = true;'task', task, function() {
Search WWH ::

Custom Search