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. Default is "jQuery".

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

  • {{elem( jQueryClass ) identifier}}

    version added: 1.3

    jQueryClass   String specifying a global jQueryClass / jQuerySubClass name for the initial call. Default is "jQuery".

    identifier   An identifier for the element. All elements with the same identifier in the template will be handled as a set of 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: ${} Template Tag, {{if}} Template Tag, {{else}} Template Tag , {{html}} Template Tag, {{tmpl}} Template Tag and {{wrap}} Template Tag. User-defined template tags can also be specified, by extending the jQuery.tmpl.tag map.

Using the {{elem}} Template Tag

Only one {{elem}} tag can be used for an element, use the {{elem}} tag like an element attribute such as class.

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');
  • Access the data, and set selection on the item. (Using the {{elem}} tag movies as a set of elements.)

    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 'movies}}>${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.movies.eq(2).css('background','green');