.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.0name 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; });