{{html}} Template Tag
Categories: Template Tags
{{html fieldNameOrExpression}}
Plugin: jQuery.tmpl
Description: Used for insertion of HTML markup strings in the rendered template. Evaluates the specified field on the current data item, or the specified JavaScript function or expression.
-
{{html fieldNameOrExpression}}
version added: 1.0fieldNameOrExpression The name of a field on the current data item, or a JavaScript function or expression, returning HTML markup.
Note: For information about how to render templates, see .tmpl() and jQuery.tmpl().
Template Tags
Template tags such as the {{html}}
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}}, {{tmpl}} and {{wrap}}. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag
map.
Using the {{html}} Template Tag
The following example shows how to use {{html}}
to insert markup from the Synopsis
field of the data item into the rendered template.
<script id="movieTemplate" type="text/x-jquery-tmpl"> <h4>${Name}</h4> <p>{{html Synopsis}}</p> </script>
HTML encoding
Using {{html fieldNameOrExpression}}
is equivalent to using ${fieldNameOrExpression}
, except that it renders unencoded text into the HTML DOM, whereas ${}
encodes values by default.
Evaluating Expressions and Functions, Using Template Variables
{{html expression}}
can be used in a similar way to ${expression}
, to render markup returned by an expression or a function call, as in the following example:
Template:
<p>{{html $item.getSynopsis(true)}</p>
Code:
// Render the template with the movie data $( "#movieTemplate" ).tmpl( movie, { getSynopsis: function( short ) { //return short or long synopsis //... } }).appendTo( "#movieContainer" );
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
{{html}}
to insert markup from data.HTML:
<tmpl id="movieTemplate" type="text/x-jquery-tmpl"> <h4>${Name}</h4> <p>{{html Synopsis}}</p> </tmpl> <div id="movieContainer"></div>
CSS:
.role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
Code:
/* The Synopsis data field contains HTML markup. */ var movie = { Name: "Meet Joe Black", Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..." }; /* Render the template with the movie data. The template uses the {{html}} template tag to insert the Synopsis HTML markup data. */ $( "#movieTemplate" ).tmpl( movie ) .appendTo( "#movieContainer" );