{{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. Default is "jQuery".
identifier A unique identifier in the set of this template elements.
-
{{elem( jQueryClass ) identifier}}
version added: 1.3jQueryClass String specifying a global jQueryClass / jQuerySubClass name for the initial call. Default is "jQuery".
identifier An identifier for the element. All elements with the same identifier in the template will be handled as a set of 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: ${} Template Tag, {{if}} Template Tag, {{else}} Template Tag , {{html}} Template Tag, {{tmpl}} Template Tag and {{wrap}} Template Tag. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.
Using the {{elem}} Template Tag
Only one {{elem}}
tag can be used for an element, use the {{elem}}
tag like an element attribute such as class.
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');
-
Access the data, and set selection on the item. (Using the {{elem}} tag movies as a set of elements.)
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 'movies}}>${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.movies.eq(2).css('background','green');