Categories

{{elem}} Template Tag

Categories: Template Tags | Templates

{{elem( jQueryClass ) identifier}}Returns: jQuery

Plugin: jQuery.tmpl

Description: Used for define a simple access on an element in the rendered template.

  • {{elem( jQueryClass ) identifier}}

    version added: 1.0

    jQueryClass   String specifying a global jQueryClass / jQuerySubClass name for the initial call. Defaults to "jQuery".

    identifier   A unique identifier in the set of this template elements.

Note: For information about how to render templates, see .tmpl() and jQuery.tmpl().

Template Tags

Template tags such as the {{elem}} tag can 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: ${}, {{if}}, {{else}} , {{html}}, {{tmpl}} and {{wrap}}. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.

Using the {{elem}} Template Tag

Define an identifier named myButton for simple element access using {{elem 'identifier'}}.

<div>
  <button {{elem 'myButton'}}>${title}</button>
</div>

Access the my button element:

.tmplItem('elements').myButton

Includs use of jQuerySubClass jQuery.sub()

Define a jQuerySubClass:

jQuerySub = $.sub();

Use jQuerySubClass in template:

<div>
  <button {{elem(jQuerySub) 'button'}}>${title}</button>
</div>
  • Access the data, and set selection on the item.

    HTML:
    <tmpl id="boxTemplate" type="text/x-jquery-tmpl">
      <div>
        <div {{elem 'header'}}>${title}</div>
        <div {{elem 'content'}}>
          <ul>
          {{each(i, movie) movies}}
            <li {{elem 'movie_'+i}}>${movie.Name}</li>
          {{/each}}
        </div>
        <div {{elem 'footer'}}>${note}</div>
      </div>
    </tmpl>
    Code:
    var data = [
        title: "My movie list"
        movies: {
            { Name: "Meet Joe Black" },
            { Name: "The Mighty" },
            { Name: "City Hunter" }
        },
        note: "A list of 3 movies."
    ];
    
    $('#boxTemplate').tmpl(movies);
    
    // access the elements list
    var elemnts = $('#boxTemplate').tmplItem('elements');
    
    // access the header element and modify css style
    elements.header.css('background','red');
    
    // access the second movie element in the list and modify css style
    elements.movie_2.css('background','green');