jQuery Plugin
{{each}} Template Tag
{{each( index, value ) collection}} content {{/each}}
Description: Used to iterate over a data array, and render the content between the opening and closing template tags once for each data item.
-
version added: 1.4.3{{each( index, value ) collection}} content {{/each}}
collectionThe JavaScript array (or object) to iterate over.
indexString specifying a variable name for the iteration index (or key, in the case of an object). Defaults to "$index".
valueString 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".
This documentation topic concerns the jQuery Templates plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl.
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}}
Examples:
Example: Using {{each}}...{{/each}} to render a section of markup iteratively over hierarchical data.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<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>
<script>
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" );
</script>
</body>
</html>Example: Specifying the index and value parameters of the {{each}} tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<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>
<script>
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" );
</script>
</body>
</html>