{{each}} Template Tag
Categories: Template Tags
{{each( index, value ) collection}} content {{/each}}
Plugin: jQuery.tmpl
Description: Used to iterate over a data array, and render the content between the opening and closing template tags once for each data item.
-
{{each( index, value ) collection}} content {{/each}}
version added: 1.0collection The JavaScript array (or object) to iterate over.
index String specifying a variable name for the iteration index (or key, in the case of an object). Defaults to "$index".
value String specifying a variable name for the current data item in the array (or property value, in the case of an object) during the iteration. Defaults to "$value".
Note: For information about how to render templates, see .tmpl() and jQuery.tmpl().
Template Tags
Template tags such as the {{each}}
tag can be 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 {{each}} Template Tag
The following example shows how to use {{each}}...{{/each}}
to render a section of markup iteratively over hierarchical data.
Template:
<li> Title: ${Name}. {{each Languages}} ${$index + 1}: <em>${$value}. </em> {{/each}} </li>
Data:
var movies = [ { Name: "Meet Joe Black", Languages: ["French"] }, { Name: "The Mighty", Languages: [] }, { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] } ];
Evaluating Expressions and Functions, Using Template Variables
{{each expression}}
can be used in a similar way to ${expression}
, to render content iteratively over an array returned by an expression or a function call, as in the following example:
... {{each $item.getSortedLanguages("a-z")}} ... {{/each}} ...
See ${} for more detailed documentation and examples of using template tags in association with expression evaluation, function calls, template variables, etc.
The index and value parameters of {{each}}
The block of template markup between the opening and closing tags {{each}}
and {{/each}}
is rendered once for each data item in the data
array. Within this block the {{each}}
template tag exposes the current index and value as additional template variables $index
and $value
. These default variable names can be changed by passing in index
and value
parameters to the {{each}}
template tag, as in the following example:
{{each(i, language) Languages}} ${i + 1}: <em>${language}. </em> {{/each}}
Note:
This feature and its documentation are in beta and subject to change before final release.-
Using
{{each}}...{{/each}}
to render a section of markup iteratively over hierarchical data.HTML:
<tmpl id="movieTemplate" type="text/x-jquery-tmpl"> <li> Title: ${Name}. {{each Languages}} ${$index + 1}: <em>${$value}. </em> {{/each}} </li> </tmpl> <ul id="movieList"></ul>
Code:
var movies = [ { Name: "Meet Joe Black", Languages: ["French"] }, { Name: "The Mighty", Languages: [] }, { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] } ]; /* Render the template with the movies data */ $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" );
-
Specifying the index and value parameters of the
{{each}}
tag.HTML:
<tmpl id="movieTemplate" type="text/x-jquery-tmpl"> <li> Title: ${Name}. {{each(i, language) Languages}} ${i + 1}: <em>${language}. </em> {{/each}} </li> </tmpl> <ul id="movieList"></ul>
Code:
var movies = [ { Name: "Meet Joe Black", Languages: ["French"] }, { Name: "The Mighty", Languages: [] }, { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] } ]; /* Render the template with the movies data */ $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" );