Note: For information about how to render templates, see .tmpl() and jQuery.tmpl().

Template Tags

Template tags such as the {{tmpl}} 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: ${}, {{each}}, {{if}}, {{else}}, {{html}} and {{wrap}}. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.

Using the {{tmpl}} Template Tag

The following example shows how to use {{tmpl}} to render a nested template.

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}}
    <tr class="detail"><td>Director: ${Director}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr>
</script>

The template parameter can be any of the following:

• A string containing markup.
• An HTML element (or jQuery object that wraps an element) whose content is to be used as the template.
• A string corresponding to the name of a named template (see jQuery.template() and .template()).
• A compiled-template function (see jQuery.template() and .template()).

If data is an array, the template is rendered once for each data item in the array. If data is an object, or if the data parameter is missing or null, a single template item is rendered.

The following example shows how to iterate over hierarchical data, by passing a data parameter to the a nested {{tmpl}} tag.

Templates:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <tr>
        <td>${Name}</td>
        <td>{{tmpl(Languages) "#languageTemplate"}}</td>
    </tr>
</script>

<script id="languageTemplate" type="text/x-jquery-tmpl"> 
    <em>${Name}</em>
</script>

Data:

var movies = [
    { Name: "Meet Joe Black", Languages: ["English", "French"] },
    { Name: "The Mighty", Languages: ["English"] },
    { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];

Recursive Nested {{tmpl}} Tags

A template may contain a {{tmpl}} or {{wrap}} tag referencing the same template. The following example uses a recursive template to create a tree view:

Templates:

<script id="folderTmpl" type="text/x-jquery-tmpl">
    <li class="toggle">
        <span class="expand">${expanderSymbol($item)}</span>
        <span>${name}</span>
    </li>
    {{if expanded}}
        <li>
            <ul>{{tmpl(getFolderItems($item)) "#itemTmpl"}}</ul>
            <ul>{{tmpl(getSubFolders($item)) "#folderTmpl"}}</ul>
        </li>
    {{/if}}
</script>

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <li class="folderItem">${name}</li>
</script>

Data:

// Hierarchy of named folders 
var folders = {
    name: "Samples",
    folders: [
        { name: "API", folders: [
            { name: ".tmpl()"}
        ]},
        { name: "Template markup", folders: [
            { name: "Tags", folders: [
                { name: "{{wrap}}"}
            ]},
        ]},
    ]
};

// Array for the folder items. Each item can show up in one or more folders
var samples = [
    { name: "Template in script block", 
        folders: [ ".tmpl()" ], 
        description: "Rendering a template declared in script block" },
    { name: "Tab View", 
        folders: [ "{{wrap}}", ".tmpl()" ], 
        description: "A tab view, using {{wrap}}" }
];