Using jQuery Templating: An Introduction

Follow us on LinkedIn for our latest data and tips!

, ,

Using jQuery Templating: An Introduction

Templating is a common server-side language technology. If you’ve worked with data sources where you had a need to output that date to a page—and we pretty much all have—you’re likely already familiar with Templating. Simply put, it’s the implementation of rendering repeating html fragments that are tied or bound to a dynamic data source.

In this post, we’ll be working with the appendTo fork of John Resig’s jquery.tmpl plugin. I’d recommend reading up on John’s riginal proposal for Javascript Micro-Templating; Whether or not you’re a fan, it’s a good read and some useful background.

So let’s get into it!

Why use templating in enterprise development?

Let’s use an ASP.NET snippet to make a helpful point here: the following code outlines the typical use of an ASP.NET control, called a Repeater. The markup is fairly straightforward: specify a template and the data that should be populated in place.

This is a basic example of how templating is used within ASP.NET:

<asp:Repeater id="_Repeater" runat="server">
            <%# DataBinder.Eval(Container.DataItem, "Id") %>,
            <%# DataBinder.Eval(Container.DataItem, "Name") %>,
            <%# DataBinder.Eval(Container.DataItem, "URL") %>,
            <%# DataBinder.Eval(Container.DataItem, "Image") %>

Why is this useful, and how does this effect the enterprise developer?

It’s widely accepted that separation of concerns is a valuable practice when building websites. Templating provides the means to separate data and markup that would otherwise be tightly coupled in a script file. This separation provides for fairly clean markup, keeps the markup out of your JavaScript, cuts down on the amount of JavaScript needed, and, in my humble opinion, makes the code much easier to maintain. All these benefits lead to an obvious savings in time and development costs.

Enough rabbling, let’s see some code!

jQuery Template Examples

Sample Template:

<script type="text/html" id="template">
        <p>${id}, ${name}, ${url}, ${image}</p>

When you look at that example, you might be asking why we use script tags. The simple answer is that browsers don’t know what to do with script tags that have a type attribute of text/html. The browser doesn’t execute the tag content, and there’s another added bonus: the content inside is not html-encoded when read through the dom. This allows the plugin to read the template as a literal string, rather than having to decode an html encoded mess.

Note: If you’re in a bind with script tags for whatever reason (ie. server processing that removes script tags) you can get away with using `

Templating is just one of the many somewhat obvious things you should be using to keep your code clean, simple and delivered on-time. We’ll be rolling out a number of best practices posts over the next few weeks and months, so keep an eye out for more, and as always, feel free to leave questions and comments!