jQuery Plugin
{{else}} Template Tag
{{else fieldNameOrExpression}} content {{/if}}
Description: Used in association with the {{if}}...{{/if}} tag to provide alternative content based on the values of one or more expressions. The {{else}} tag can be used without a parameter, as in: {{if a}}...{{else}}...{{/if}}, or with a parameter, as in: {{if a}}...{{else b}}...{{/if}}.
-
version added: 1.4.3{{else 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 {{else}} 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}}, {{if}}, {{tmpl}} and {{wrap}}. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.
Using the {{else}} Template Tag without a parameter
The following example shows how to use {{if expression}}...{{else}}...{{/if}} to insert conditional content. In the example different content is rendered depending on whether or not the Languages field of the data item is defined.
Template:
<li>
Title: ${Name}.
{{if Languages}}
(Alternative languages: ${Languages}).
{{else}}
(Available only in the original version).
{{/if}}
</li>
Data:
var movies = [
{ Name: "Meet Joe Black", Languages: "French" },
{ Name: "The Mighty" },
{ Name: "City Hunter", Languages: "Mandarin and Cantonese" }
];
Using the {{else}} Template Tag with a parameter
The following example shows how passing a parameter to {{else expression}} provides the equivalent of additional 'else if' conditional blocks. In the example different content is rendered depending on whether the Languages field of the data item is defined, and if not, depending on whether the Subtitles field of the data item is defined.
Template:
<li>
Title: ${Name}.
{{if Languages}}
(Alternative languages: ${Languages}).
{{else Subtitles}}
(Original language only. Subtitles in ${Subtitles}).
{{else}}
(Original version only, without subtitles).
{{/if}}
</li>
Data:
var movies = [
{ Name: "Meet Joe Black", Languages: "French", Subtitles: "English" },
{ Name: "The Mighty", Subtitles: "French and Spanish" },
{ Name: "The Mighty" },
{ Name: "City Hunter", Languages: "Mandarin and Cantonese" }
];
Examples:
Example: Using {{if expression}}...{{else}}...{{/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}}
(Alternative languages: ${Languages}).
{{else}}
(Available only in the original version).
{{/if}}
</li>
</tmpl>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "Meet Joe Black", Languages: "French" },
{ Name: "The Mighty" },
{ Name: "City Hunter", Languages: "Mandarin and Cantonese" }
];
/* Render the template with the movies data */
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
</body>
</html>Example: Using {{if expression1}}...{{else expression2}}...{{else}}...{{/if}} to render content conditionally, based on the values of different expressions.
<!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}}
(Alternative languages: ${Languages}).
{{else Subtitles}}
(Original language only. Subtitles in ${Subtitles}).
{{else}}
(Original version only, without subtitles).
{{/if}}
</li>
</tmpl>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "Meet Joe Black", Languages: "French", Subtitles: "English" },
{ Name: "The Mighty", Subtitles: "French and Spanish" },
{ Name: "The Mighty" },
{ Name: "City Hunter", Languages: "Mandarin and Cantonese" }
];
/* Render the template with the movies data */
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
</body>
</html>