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