HTML and CSS Reference
In-Depth Information
<head>
<meta charset="utf-8">
<title>Task list</title>
<link rel="stylesheet" type="text/css" href="styles/tasks.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="scripts/jquery-tmpl.js"></script>
</head>
//
You may notice that it is no longer necessary to specify that the language of
a script file is “text/javascript”. HTML5 assumes by default that scripts are
JavaScript.
This is all that is required in order to start using the jQuery Template plugin. When the
script loads it will automatically add new features to jQuery, just as our own custom plugin
added new features to jQuery.
When new tasks are created via the form, we need to dynamically add them to the
table
;
this means creating a new
tr
element in the table, and adding the appropriate
td
columns.
We could achieve this with jQuery directly by generating a string to represent the HTML
and then appending it to the table. As we saw earlier in this chapter, it is possible to gener-
ate elements directly out of HTML and add them into the DOM.
Constructing HTML within code is error prone however, and it would be more convenient
if we can write the basic structure of the row as HTML, and leave placeholders for the dy-
namic content.
//
Templating libraries are widely used in software development. Like jQuery tem-
plate, they provide basic control structures such as loops and branching, and al-
low placeholders for parameters.
jQuery template allows us to define the following template in the HTML page:
<script id="taskRow" type="text/x-jQuery-tmpl">
<tr>
