JQueryTmpl < System

---+!! %TOPIC%

%JQPLUGINS{"tmpl"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

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

---++ Example
%JQREQUIRE{"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

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

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

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

<verbatim class="js">
<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> 
</verbatim>

<literal>
<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> 
</literal>

The result will be appended to the =movieList= element:

<verbatim class="html">
<ul id="movieList"></ul> 
</verbatim>

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

This topic: System > JQueryPlugin > JQueryTmpl
Topic revision: 05 May 2015, ProjectContributor (raw view)

Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback