Categories

{{if}} Template Tag

Categories: Template Tags

{{if fieldNameOrExpression}} content {{/if}}

Plugin: jQuery.tmpl

Description: Used for conditional insertion of content. Renders the content between the opening and closing template tags only if the specified data item field, JavaScript function or expression does not evaluate to false (or to zero, null, type "undefined", or the empty string ).

  • {{if fieldNameOrExpression}} content {{/if}}

    version added: 1.0

    fieldNameOrExpression   The name of a field on the current data item, or a JavaScript function or expression to be evaluated.

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

Template Tags

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

Using the {{if}} Template Tag

The following example shows how to use {{if}} to insert conditional content, depending on whether the Languages field of the data item is defined (and is not null).

Template:
<li>
    Title: ${Name}.
    {{if Languages}}
        (Alternative languages: ${Languages}).
    {{/if}}
</li>
Data:
var movies = [
    { Name: "Meet Joe Black", Languages: "French" },
    { Name: "The Mighty" },
    { Name: "City Hunter", Languages: "Mandarin and Cantonese" }
];

Evaluating Expressions and Functions, Using Template Variables

{{if expression}} can be used in a similar way to ${expression}, to render conditionally based on the value returned by an expression or a function call, as in the following example:

Template:
<li>
    Title: ${Name}.
    {{if Languages.length}}
        (Alternative languages: ${$item.getLanguages(" - ")}).
    {{/if}}
</li>
Data:
var movies = [
    { Name: "Meet Joe Black", Languages: ["French"] },
    { Name: "The Mighty", Languages: [] },
    { Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];

See ${} for more detailed documentation and examples of using template tags in association with expression evaluation, function calls, template variables, etc.

Note:

This feature and its documentation are in beta and subject to change before final release.
  • Using {{if}} to render content conditionally, based on the value of an expression.

    HTML:
    
    <tmpl id="movieTemplate" type="text/x-jquery-tmpl"> 
        <li>
            Title: ${Name}.
            {{if Languages.length}}
                (Alternative languages: ${$item.getLanguages(" - ")}).
            {{/if}}
        </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, { 
        getLanguages: function( separator ) {
            return this.data.Languages.join( separator );
        }
    }).appendTo( "#movieList" );