jQuery Templates

I am a big fan of jQuery, as it is my favorite JavaScript framework. It has many great features already, and even more are being developed everyday. It simply makes developing responsive web applications much, much faster.

I am currently working on a large application that displays to the user a lot of grids practically on every screen. The data inside the grids, as well as their basic structure can change according to different selections the user makes. It is very important for me to make this web application very responsive and fast, so it was pretty obvious from the start that I'd be using a lot of Ajax and depending heavily on the client to do the rendering.

I had a standard Ajax call, returning me a JSON object to work with. I then found myself trying to dynamically build a string that would represent the HTML markup inside a table, appending it to the table as I iterate over the JSON properties. This isn't very difficult to do at first, but will always look very messy, and will be much uglier to maintain...

Luckily, just in time, I came across the jQuery documentation of their new templates feature. This allows you to design a small template of HTML, mark where the parameters will be, and bind a JSON object to that template. Then, you can practically do whatever you want with it- append it to a table, or just use it as a list of data, and the best part is that the UI is separated from the 'code', meaning it is very easy to maintain since you can change your template around freely and easily, while never changing the Ajax calls nor JavaScripts.

I'll show some simple examples so you can see what I mean, and to help get you started on your own.

First, you obviously need to include the templates plug-in into your HTML file (can be found here):

<script language="javascript" type="text/javascript"
		src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript"
		src="Scripts/jquery.tmpl.js"></script>

The template you want to use could be inserted into a script tag like this:

<script id="templateStructure" type="text/x-jquery-tmpl">
    &lttr>
        <td>${FirstName}</td>
        <td>${LastName}</td>
        <td>${Email}</td>
    </tr>
</script>

Notice that I gave the script an id, which we'll need soon, and the type is marked text/x-jquery-tmpl.

The ${} brackets tell the jQuery where to place the data of the JSON object we will bind. The name inside the brackets must correlate with the properties of the bound JSON object. This means our JSON object will be an array of objects (or one object if that's all we have) that all have the properties FirstName, LastName and Email.

The template I created represents a row in a table that I will bind to, and the table I'm going to bind it to, looks like this:

<table border="1" id="templateTable">
    <tr>
        <td><b>First Name</b></td>
        <td><b>Last Name</b></td>
        <td><b>Email</b></td>
    </tr>
</table>

So when I add the rows, the table will be filled with data. In order to load the template, I use the template() method :

$('#templateStructure').template('myTemplate');

This will load the template we defined in the script tag and call it myTemplate.

Now, all we need to do is give the template a data source, and place it wherever we want. In our case, we'll append it to the table so it 'fills' the table's data.

$(document).ready(function() {
    // our data object we will bind
    var myData = [ {FirstName:'Bob', LastName:'Jannovitz', Email:'bobby@gmail.com'},
                   {FirstName:'Howard', LastName:'Shennaniganz',
			Email:'howard@yahoo.com'},
                   {FirstName:'Joe', LastName:'Stoozi', Email:'joeii@hotmail.com'} ];

    // load the template and name it 'myTemplate'
    $('#templateStructure').template('myTemplate');

    // bind the data to the template and append to the table
    $.tmpl('myTemplate', myData).appendTo('#templateTable');
});

The final result will be the table with the data rendered into it.

In Conclusion

The templates jQuery plug-in can be extremely useful in binding data to an HTML template on the client for fast responsive applications. It also has many more great features like instructions that can cause your template to act differently to different data situations. It is important to note though, that all this is only in beta stage, and is subject to change. I however, already started using it, and so far so good... :)

I might be posting something more advanced about this soon, but until then - you can read more about it here.