Categories

.template()

Categories: Templates

.template( [ name ] )Returns: function

Plugin: jQuery.tmpl

Description: Compile the contents of the matched element as a reusable compiled template.

  • .template( [ name ] )

    version added: 1.0

    name   A string naming the compiled template.

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

This method returns a compiled template, created from the content of the first matched element. If the name parameter is provided the compiled template is stored as a named template, and can be referenced using the specified string.

See also jQuery.template().

Example: Create a compiled template associated with the name "summaryTemplate" and then reference it by name for rendering:

<script id="titleTemplate" type="text/x-jquery-tmpl">
  <li>${Name}</li>
</script>
___________

// Compile the inline template as a named template
$( "#titleTemplate" ).template( "summaryTemplate" );

function renderList() {
  // Render the movies data using the named template: "summaryTemplate"
  $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}

Example: Use the return value rather than the name string to reference the compiled template:

<script id="titleTemplate" type="text/x-jquery-tmpl">
  <li>${Name}</li>
</script>
___________

// Compile the inline template as a named template
var myTemplate = $( "#titleTemplate" ).template();

function renderList() {
  // Render movies data using the compiled template: myTemplate
  $.tmpl( myTemplate, movies ).appendTo( "#moviesList" );
}

Example: Create a named template and reference it by name as a nested template:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  {{tmpl "summaryTemplate"}}
  <tr><td>Director: ${Director}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl">
  <tr><td>${Name}</td></tr>
</script>
___________

// Compile the titleTemplate template as a named template
// referenced by the {{tmpl}} tag
$( "#titleTemplate" ).template( "summaryTemplate" );

// Render the movies data using the named template as a nested template
$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );

Example: Switch the template item to a different template, using .template() to obtain compiled template:

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr>...</tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr>...</tr>
</script>
___________

// Render the summaryTemplate with the "movies" data 
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

$( "tr" ).click( function () {
  // Switch the template for this template item to
  // a different named template, then update the rendered item
  var tmplItem = $.tmplItem(this);
  tmplItem.tmpl = $( "#detailTemplate" ).template();
  tmplItem.update();
});

Note:

This feature and its documentation are in beta and subject to change before final release.
  • Dynamic switching of templates, using .template() to obtain compiled template.

    HTML:
    
    <tmpl id="summaryTemplate" type="text/x-jquery-tmpl">
      <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
    </tmpl>
    
    <tmpl id="detailTemplate" type="text/x-jquery-tmpl">
      <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
    </tmpl>
    
    Click for details:
    <table><tbody id="movieList"></tbody></table>
    
    CSS:
    
      table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
      table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } 
      table td { padding:3px; } table tr:hover { color:red; }
      .movieDetail { background-color:yellow; } 
      .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
    
    Code:
    
    var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
      { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
    ];
    var selectedItem = null;
    
    /* Render the summaryTemplate with the "movies" data */ 
    $( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );
    
    $("#movieList")
    .delegate( ".movieSummary", "click", function () {
      if (selectedItem) {
        /* Switch previously selected item back to the summaryTemplate */ 
        selectedItem.tmpl = $( "#summaryTemplate" ).template();
    
        /* Update rendering of previous selected item */ 
        selectedItem.update();
      }
    
      /* Make this the selected item  */
      selectedItem = $.tmplItem(this);
    
      /* Switch this template item to the detailTemplate */ 
      selectedItem.tmpl = $( "#detailTemplate" ).template();
    
      /* Refresh rendering */ 
      selectedItem.update();
    })
    .delegate( ".movieDetail", "click", function () {
      /* Unselect - switch to the summaryTemplate */ 
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
    
      /* Refresh rendering */ 
      selectedItem.update();
    
      selectedItem = null;
    });