Categories

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

    fieldNameOrExpression   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" );