Home
Run
Accordion: Using dynamic switching of templates
Click for details:
Data:
var movies = [
{
Title: "The Red Violin",
Languages: [
{ Name: "English" },
{ Name: "French" }
]
},
...
];
;
HTML:
<script id="summaryTemplate" type="text/x-jquery-tmpl">
<tr class='movieSummary'><td>
${Title}
</td></tr>
</script>
<script id="detailTemplate" type="text/x-jquery-tmpl">
<tr class='movieDetail'><td>
${Title}
</td></tr>
<tr class='movieDetail'><td><b>Languages:</b>
{{tmpl(Languages) "#languageTemplate"}}
</td></tr>
</script>
Script:
var selectedItem = null;
$("#movieList")
.delegate( ".movieSummary", "click", function () {
/* Unselect the currently selected item */
unselect( selectedItem );
/* Get template item clicked element belongs to, and make it the selected item */
selectedItem = $.tmplItem(this);
/* Swap template on this item to the detail template, and update item */
selectedItem.tmpl = detailTemplate;
selectedItem.update();
})
.delegate( ".movieDetail", "click", function () {
/* Unselect the currently selected item */
unselect();
});
function unselect( tmplItem ) {
if ( selectedItem ) {
/* Swap template back to the summary template and update item */
selectedItem.tmpl = summaryTemplate;
selectedItem.update();
selectedItem = null;
}
}