JQueryTmpl

jQuery templates contain markup with binding expressions ('Template tags'). Templates are applied to data objects or arrays, and rendered into the HTML DOM

Documentation for the jQuery Templates plugin can be found on the jQuery documentation site: http://api.jquery.com/category/plugins/templates

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

For more on the history of this change, see Official Plugins: A Change in the Roadmap and jQuery Templates and JsViews: The Roadmap

Note: See tagged versions for stable Beta releases. Requires jquery version 1.4.2.

Example

Local data

This is a template stored in a script section of type text/x-jquery-tmpl. This is going to be used by jquery.tmpl in a loop over all data provided and render a list item for each by inserting the data from the array into this template and append it to the movie list

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

This is example stores data locally in a javascript array. You may also fetch this data using remote data. See the second example.

<script> 
jQuery(function($) {
  var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

  $("#movieTemplate").tmpl(movies).appendTo( "#movieList");
});
</script> 

The result will be appended to the movieList element:

<ul id="movieList"></ul> 

Remote data

Below is a little movie application using the Open Data API of Netflix.com to query movies from their database. The returned json object is then formatted using a template similar to the above local data example.