Facilitating the spread of knowledge and innovation in professional software development



Choose your language

InfoQ Homepage News Introducing Templates for jQuery

Introducing Templates for jQuery


In the first of three new libraries created by Microsoft and accepted by jQuery as official plugins, the jQuery Templates API allows for the dynamic creation of HTML Elements from data objects. Like server-side templating languages such as ASP or VB’s XML Literals, one merely has to leave holes with data-binding expressions that indicate what should be displayed.

Basic data binding is done using the syntax ${fieldName}. For example:


<script id="bookTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${Year})</li>

To use a template, simply define the target location and execute the template using the “tmpl” method.


<ul id="bookList"></ul>
$( "#bookTemplate" ).tmpl( books ).appendTo( "#bookList" );

Using this syntax, the template is compiled as a JavaScript function. Compiled templates can also be created form strings using jQuery.template function. Templates created in this fashion can be named, which stores them in the $.templates list, or simply returned as an object.

For single-use templates, the overhead of compiling them is often not worth the cost. In these situations you can pass the template definition as a string directly to the template execution function, jQuery.tmpl.

The jQuery Template API requires jQuery 1.4.2. It is licensed under both the MIT and GPL Version 2 licenses.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Nothing new

    by Luca Guidi,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    What's the difference with Mustache?

  • Same notation with Tapestry

    by halil karakose,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    The same notation(${}) is also used in Tapestry templates. This API may not be compatible with Tapestry.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p


Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.