dev builds
themes manual
device status forums
mailing lists
IRC bugs
dev guide

Search | Go
Wiki > System > JQueryPlugin > JQueryTmpl


Author(s): Boris Moore
Version: 1.0.0pre

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:

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.


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"> 
  <b>${Name}</b> (${ReleaseYear})

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

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");

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 to query movies from their database. The returned json object is then formatted using a template similar to the above local data example.


    r1 - 12 Sep 2011 - 13:07:07 - ProjectContributor

    Parents: JQueryPlugin
    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 Wiki? Send feedback