jQuery Plugin
.template()
.template( [name] ) Returns: function
Description: Compile the contents of the matched element as a reusable compiled template.
-
version added: 1.4.3.template( [name] )
nameA string naming the compiled template.
This documentation topic concerns the jQuery Templates plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl.
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();
});
Example:
Dynamic switching of templates, using .template() to obtain compiled template.
<!DOCTYPE html>
<html>
<head>
<style>
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; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<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>
<script>
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;
});
</script>
</body>
</html>