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();
});