Categories

{{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.0

    collection   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" );