Tab View: Using {%wrap%} for template composition incorporating wrapped HTML

HTML:

<script id="movieTemplate" type="text/x-jquery-tmpl">
	<h2>${Title}</h2>

	{%wrap tabsTemplate%}
		<h3>Details</h3>
		<div>
			Title: <input value="${Title}" >
			Languages:
			{%each Languages%}<span>${$value.Name}</span>{%/each%}
		</div>

		<h3>Description</h3>
		<div>
			... content of tab 2
		</div>

		<h3>Comments</h3>
		<div>
			... content of tab 3
		</div>
	{%/wrap%}
</script>

<script id="tabsTemplate" type="text/x-jquery-tmpl">
	<table><tbody>
		<tr>
			{%each $item.html("h3", true)%}
				<th class="header_${$index === selectedTab}">
					${$value}
				</th>
			{%/each%}
		</tr>
		<tr><td colspan='${$item.html("h3").length}'>
			<div>
				{%html $item.html("div")[selectedTab]%}
			</div>
		</td></tr>
	</tbody></table>
</script>

Script:

	function refresh() {
		$( "#tabsView" ).empty();

		$( "#movieTemplate" ).tmpl( movie )
			.appendTo( "#tabsView" );
	}

	$( "#tabsView" )
		.delegate( ".tabsView th", "click", function() {
			/* Set the selected tab index to this tab */
			$.tmplItem( this ).data.selectedTab = $(this).index();

			/* update the rendering */
			refresh();
		});