Pre-requisite

For convinence, defines a function to create a script tag and inserts that tag in the body.

Ideally, you should have this the template enclosed within the script tags in your HTML file that write this in your HTML file

Simple Templates

The cool thing about templates is that it lets you easily structure your content display without all the hassle of string concatenation. For example, say I had a data set containing an ID and a name and I wanted to display the name as a hyperlink.

The "script" tags are necessary and used because they allow your template to be embedded within the body of the page. Notice that we've defined the placeholders as ${id} & ${name}, the same names used in the identifiers in our data. The "${}" tells the template parser that the field needs to be replaced with the expected value.

The plugin's .tmpl() method accepts the data we've defined and handles the parsing of the template we've selected. Then we use jQuery's .appendTo() method to append the results to an unordered list tag.

Nested Templates

The nesting of templates can be valuable feature as it allows a componentized layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together

The template above defines a phoneTemplate and then, nests it inside the outerTemplate using {{tmpl($data) "#phoneTemplate"}}

Inline Expressions

Being able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that�s being rendered, you�d probably find templates a lot less useful. That�s where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered.

In the example above, age is subtracted from the current year 2010, to find the year of birth

Code Blocks

Code blocks allow us to specify a conditional statement for creating a descriptor based on the person�s age. The key is the �{{if..else}}� custom tag that�s been incorporated into the template plugin that allows you to specify conditional statements.