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: r5 - 11 Oct 2023, JongeunLee
    This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
    Ideas, requests, problems regarding Foswiki? Send feedback