jQuery Templates

jQuery Template

In this article, we will try to answer the three questions, What, Why and How, about jQuery templates.

So let's answer the first question.

What is a jQuery template

jQuery Templates started out in March 2010 by Microsoft in collaboration with the jQuery community.

A very simple and easy definition to explain is, a jQuery Template enables you to display the results/data to the browser. You can display a bunch of records (fetching from DB or whatever source) to the browser.

It also allows you to easily convert JSON to HTML without having to parse it.

Why jQuery-template

You must be thinking that definitely it would be for binding data, you are right.

But the story does not end here.

When writing applications whenever data is fetched with a post request from the server/database, in return we create DOM elements to represent that data.

Now here we do all the messy code to put the string together in the JavaScript code and iterate the result set to display the data.

At that time it would be a great help indeed if we have some kind of template engine, that could display/render data without parsing and doing a lot of messy code.

Let's see in action and answer our how to implement a jQuery-template.

In the following example we will try to fetch records from an array that will display a list of cricketers along with their name and match information.

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
<div id="pageContent">
<h1>
<center>
Indian Players</center>
</h1>
<div id="container">
</div>
</div>
<script id="players" type="text/x-jQuery-tmpl">
<div>
<h2>${name}</h2>
<img src="${picture}" alt="" style="border:2px solid blue"/>
Matches: ${matches}
</div>
</script>
<script>
var cricketers = [
{ name: "Sachin Tendulkar", matches: 434, picture: "sachin.jpg" },
{ name: "Virendra Sehwag", matches: 334, picture: "sehwag.jpg" },
{ name: "Rahul Dravid", matches: 384, picture: "dravid.jpg" },
{ name: "Dhoni", matches: 280, picture: "dhoni.jpg" },
];
$("#players").tmpl(cricketers).appendTo("#container");
</script>
</body>
</html>

Let's see how it works:

First of all text highlighted in dark yellow is the script reference to the jQuery template library.
Second the text highlighted in red color indicates the actual template included in the script tag with special MIME type.
Notice that the SCRIPT tag that wraps the template has a MIME type of text/x-jQuery-tmpl. Why is the template wrapped in a SCRIPT tag and why the strange MIME type?
When a browser encounters a SCRIPT tag with an unknown MIME type, it ignores the content of the tag. This is the behavior that you want with a template. You don't want a browser to attempt to parse the contents of a template because this might cause side effects.
The Third thing to notice is the expression ${…} is used to display the value of the JavaScript expression within a template. As you can see the expressions used above in the example will render the cricketer information one by one without any iteration/parsing.
Finally the template is rendered using the tmpl() method.

The text highlighted in yellow selects the players template and renders the array of cricketers. The result is appended to the container.

Apart from regular binding, within a template we can use any of the following template tags.

{{tmpl}}: Used for template composition. See the section below.
{{wrap}}: Used for wrapped templates. See the section below.
{{each}}: Used to iterate through a collection.
{{if}}: Used to conditionally display template content.
{{else}}: Used with {{if}} to conditionally display template content.
{{html}}: Used to display the value of an HTML expression without encoding the value. Using ${…} or {{= }} performs HTML encoding automatically.
{{= }}: Used in exactly the same way as ${…}.
{{! }}: Used for displaying comments. The contents of a {{!…}} tag are ignored.

For the working code please find below the code snippet:

jQuery Template

I hope this article must have helped you to understand the basics of templates. Anywasys there are other template engines available like Handlebar, Moustache and so on. But jQuery -template is the basic and powerful.

I hope you enjoyed reading the article.

jQuery Templates

Reactions

1 Comment