JQueryTmpl

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

Example

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>