jQuery Plugin
{{html}} Template Tag
{{html fieldNameOrExpression}}
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.
-
version added: 1.4.3{{html fieldNameOrExpression}}
fieldNameOrExpressionThe name of a field on the current data item, or a JavaScript function or expression, returning HTML markup.
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 {{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.
Example:
Using {{html}} to insert markup from data.
<!DOCTYPE html>
<html>
<head>
<style>
.role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
</style>
<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">
<h4>${Name}</h4>
<p>{{html Synopsis}}</p>
</tmpl>
<div id="movieContainer"></div>
<script>
/* 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" );
</script>
</body>
</html>