jQuery & jQuery UI Documentation

jQuery & jQuery UI

previous page next page

jQuery Plugin

{{if}} Template Tag

Categories: Plugins > Templates > Template Tags

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

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 ).

  • version added: 1.4.3{{if fieldNameOrExpression}} content {{/if}}

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

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

Example:

Using {{if}} to render content conditionally, based on the value of an expression.

<!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}.
        {{if Languages.length}}
            (Alternative languages: ${$item.getLanguages(" - ")}).
        {{/if}}
    </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, { 
    getLanguages: function( separator ) {
        return this.data.Languages.join( separator );
    }
}).appendTo( "#movieList" );
</script>

</body>
</html>
previous page start next page