jQuery Template

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

While writing applications whenever data is fetched with 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 great indeed help if we have some kind of template engine, which could display/render data without parsing and doing lot of messy code.

Lets c in action and answer our HOW can we implement jQuery-template.

<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>