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