jQuery - HTML5, JavaScript, and jQuery - page 133

<td>${task}</td>
<td><time datetime="${requiredBy}"> ${requiredBy} </time></td>
<td>${category}</td>
<td>
<nav>
<a href="#">Edit</a>
<a href="#">Complete</a>
<a href="#" class="deleteRow">Delete</a>
</nav>
</td>
</tr>
</script>
This can be added at the very bottom of the page, before the </html> (not inside the other
script block). Note that this is essentially just a block of HTML, except it contains place-
holders for values. The placeholders are inside the following constructs: ${} .
Also note that this is not a standard JavaScript block, since it is defined as type text/x-
jQuery-tmpl . The block also contains an ID, which is not typically needed in standard
script blocks.
We now are going to implement a rudimentary version of the save functionality. Start by
adding an ID to the save button:
<a href="#" id="saveTask" >Save task</a>
Next, add a click event listener to the save task button. This is going to convert the form
data into an object using the plugin we developed in the last section. It is then going to pass
this object to the template we constructed above. Notice that in the template the placehold-
er names match the property names that will appear on our task object.
The template will generate a block of HTML, which we will then append to the table body.
Add the following code to the script section of tasks.html alongside the other event hand-
lers:
$('#saveTask').click(function(evt) {
evt.preventDefault();
var task = $('form').toObject();
$('#taskRow').tmpl(task).appendTo($('#tblTasks tbody'));
});