jQuery.tmplItem()
Categories: Templates
jQuery.tmplItem( element )Returns: tmplItem
Plugin: jQuery.tmpl
Description: Return the tmplItem
data structure for the rendered template that the specified element is part of.
-
jQuery.tmplItem( element )
version added: 1.0element An HTML element (or jQuery object that wraps an element)
Note: For information about how to render templates, see .tmpl() and jQuery.tmpl().
$.tmplItem( element )
provides access to the rendered template item which the element is part of.
See also tmplItem().
Typically the element parameter passed to tmplItem()
is the this
element within an event handler.
The return value of tmplItem()
is a tmplItem
data structure whose fields provide access to:
- The HTML elements that the template item is made up of (nodes field).
- The associated data item (data field).
- The parent template item, if the template is nested (parent field).
- The template that was used to render the template item (tmpl field).
- User defined parameters or methods, such as any values that were set on the
options
map, passed totmpl()
when the template was rendered.
The following example shows how to use $.tmplItem()
to get information about the rendered template:
function myClickHandler() { var tmplItem = $.tmplItem( this ); alert( "Description: " + tmplItem.data.description ); }
Building Interactive Ajax Applications
.tmplItem()
and jQuery.tmplItem()
make it easy to use templates in scenarios beyond simple string concatenation and read-only rendering. They let you create fully-fledged interactive client-side Ajax applications in which the code needs to perform actions like the following:
- Accessing the associated data item.
- Modifying the data item.
- Accessing HTML elements that make up the rendered template item.
- Updating (re-rendering) the template item, with modified data, modified user-defined parameters, or using a different template
Example: Dynamically switching templates for a template item.:
// Get the compiled detail template var detailTemplate = $( "#detailTemplate" ).template(); // Add an onclick handler for template items currently // using the summary template $(".movieSummary").live( "click", function () { // Get the data structure for the template item // which this clicked element belongs to var tmplItem = $.tmplItem(this); // Set the template on this item to the detail template tmplItem.tmpl = detailTemplate; // re-render tmplItem.update(); })
Note:
This feature and its documentation are in beta and subject to change before final release.-
Access the data, and set selection on the item.
HTML:
<tmpl id="movieTemplate" type="text/x-jquery-tmpl"> <li><b class="movieName">${Name}</b></li> </tmpl> Click for details: <ul id="movieList"></ul>
CSS:
#movieList { cursor:pointer; color:blue; margin:8px; background-color:#f8f8f8; } #movieList li:hover { color:red; }
Code:
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; var selectedItem = null; /* Render the template with the movies data */ $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" ); /* Add an onclick handler for the movie template items */ $( ".movieName" ).live( "click", function() { if ( selectedItem ) { $( selectedItem.nodes ).css( "backgroundColor", "#f8f8f8" ); } /* Get the data structure for the template item which this clicked element belongs to */ selectedItem = $.tmplItem( this ); $( selectedItem.nodes ).css( "backgroundColor", "yellow" ); alert( "'" + selectedItem.data.Name + "' was released in " + selectedItem.data.ReleaseYear + "." ); });
-
Master detail view.
HTML:
<tmpl id="listItemTemplate" type="text/x-jquery-tmpl"> <tr><td> ${firstName} ${lastName} </td></tr> </tmpl> <tmpl id="detailTemplate" type="text/x-jquery-tmpl"> <div> <div>First Name: <em>${firstName}</em></div> <div>Last Name: <em>${lastName}</em></div> </div> </tmpl> <div style="float:left;">Click for details:<div> <table><tbody id="peopleList"></tbody></table> <div id="personDetail"></div>
CSS:
table { cursor:pointer; border-collapse:collapse; float: left; clear: both; } table tr { border:1px solid blue; color:blue; height:25px; } table tr:hover { color:red; } table, #personDetail > div { border:2px solid blue; width:220px; margin:8px 0 4px 0; background-color:#f8f8f8; } table td, #personDetail div div { padding:3px; margin:3px; } .selected { background-color:yellow; } #personDetail input { float:right; width:125px; } #personDetail { float:left; margin-left:10px; }
Code:
var people = [ { firstName: "Peter", lastName: "Jones" }, { firstName: "Eva", lastName: "Smolinski" } ]; var selectedItem = null; function renderTemplate( container, template, data ) { $( container ).empty(); $( template ).tmpl( data ).appendTo( container ); } /* Render the list */ renderTemplate( "#peopleList", "#listItemTemplate", people ); $("#peopleList") .delegate( "tr", "click", function () { if ( selectedItem ) { $( selectedItem.nodes ).removeClass( "selected"); } /* Set selection on the clicked item */ selectedItem = $.tmplItem(this); $( selectedItem.nodes ).addClass( "selected"); /* Render the detail view for this data item */ renderTemplate( "#personDetail", "#detailTemplate", selectedItem.data ); });
-
Dynamic switching of templates.
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" ); /* Add onclick handlers for movie template items using the summary or details template */ $("#movieList") .delegate( ".movieSummary", "click", function () { if (selectedItem) { // Set the template on the previously selected item // back to the summary template selectedItem.tmpl = $( "#summaryTemplate" ).template(); selectedItem.update(); } /* Get the data structure for the template item which this clicked element belongs to, and make it the selected item */ selectedItem = $.tmplItem(this); /* Set the template on this item to the detail template */ selectedItem.tmpl = $( "#detailTemplate" ).template(); selectedItem.update(); }) .delegate( ".movieDetail", "click", function () { /* Set the template on this item to the summary template */ selectedItem.tmpl = $( "#summaryTemplate" ).template(); selectedItem.update(); selectedItem = null; });
jQuery.tmplItem( element, key )Returns: Object
Plugin: jQuery.tmpl
Description: Return the named tmplItem data for the rendered template that the specified element is part of.
-
jQuery.tmplItem( element, key )
version added: 1.0element An HTML element (or jQuery object that wraps an element).
key Name of the item data stored.
Note: For information about how to render templates, see .tmpl()
and jQuery.tmpl()
.
The $.tmplItem( element, key )
method provides access to the rendered template item by name of the data stored which the element is part of.
$.tmplItem( element ).data; $.tmplItem( element, 'data' );
The above lines returns the same value.
-
Access the data, and set selection on the item.
HTML:
<tmpl id="listItemTemplate" type="text/x-jquery-tmpl"> <tr><td> ${firstName} ${lastName} </td></tr> </tmpl> <tmpl id="detailTemplate" type="text/x-jquery-tmpl"> <div> <div>First Name: <em>${firstName}</em></div> <div>Last Name: <em>${lastName}</em></div> </div> </tmpl> <div style="float:left;">Click for details:<div> <table><tbody id="peopleList"></tbody></table> <div id="personDetail"></div>
Code:
var people = [ { firstName: "Peter", lastName: "Jones" }, { firstName: "Eva", lastName: "Smolinski" } ]; var selectedNodes = null; function renderTemplate( container, template, data ) { $( container ).empty(); $( template ).tmpl( data ).appendTo( container ); } /* Render the list */ renderTemplate( "#peopleList", "#listItemTemplate", people ); $("#peopleList") .delegate( "tr", "click", function () { if ( selectedItem ) { $( selectedItem.nodes ).removeClass( "selected"); } /* Set selection on the clicked item */ selectedNodes = $.tmplItem( this, 'nodes' ); $( selectedNodes ).addClass( "selected"); });