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

No such plugin tmpl

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> 

    Topic revision: r1 - 23 Feb 2016, ProjectContributor - This page was cached on 20 May 2019 - 16:58.

    THE UNIVERSITY OF UTAHSPENCER S. ECCLES HEALTH SCIENCES LIBRARY
    10 N. 1900 E. SALT LAKE CITY, UT 84112 • 801.581.7535
    Ideas, requests, problems regarding Eccles Health Sciences Library wiki? Send feedback