{{elem}} Template Tag
Categories: Template Tags | Templates
{{elem( jQueryClass ) identifier}}Returns: jQuery
Plugin: jQuery.tmpl
Description: Used for define a simple access on an element in the rendered template.
-
{{elem( jQueryClass ) identifier}}
version added: 1.0jQueryClass String specifying a global jQueryClass / jQuerySubClass name for the initial call. Defaults to "jQuery".
identifier A unique identifier in the set of this template elements.
Note: For information about how to render templates, see .tmpl()
and jQuery.tmpl()
.
Template Tags
Template tags such as the {{elem}}
tag can used within jQuery templates in addition to text and HTML markup, in order
to enable a number of scenarios such as composition of templates, iteration over hierarchical data, parameterization of
template rendering, etc.
Other available tags include: ${}, {{if}}, {{else}} , {{html}}, {{tmpl}} and {{wrap}}. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.
Using the {{elem}} Template Tag
Define an identifier named myButton
for simple element access using {{elem 'identifier'}}.
<div> <button {{elem 'myButton'}}>${title}</button> </div>
Access the my button element:
.tmplItem('elements').myButton
Includs use of jQuerySubClass jQuery.sub()
Define a jQuerySubClass:
jQuerySub = $.sub();
Use jQuerySubClass in template:
<div> <button {{elem(jQuerySub) 'button'}}>${title}</button> </div>
-
Access the data, and set selection on the item.
HTML:
<tmpl id="boxTemplate" type="text/x-jquery-tmpl"> <div> <div {{elem 'header'}}>${title}</div> <div {{elem 'content'}}> <ul> {{each(i, movie) movies}} <li {{elem 'movie_'+i}}>${movie.Name}</li> {{/each}} </div> <div {{elem 'footer'}}>${note}</div> </div> </tmpl>
Code:
var data = [ title: "My movie list" movies: { { Name: "Meet Joe Black" }, { Name: "The Mighty" }, { Name: "City Hunter" } }, note: "A list of 3 movies." ]; $('#boxTemplate').tmpl(movies); // access the elements list var elemnts = $('#boxTemplate').tmplItem('elements'); // access the header element and modify css style elements.header.css('background','red'); // access the second movie element in the list and modify css style elements.movie_2.css('background','green');