<!--
This sample illustrates template composition, including passing parameters to a {{tmpl}} tag.
-->
<style type="text/css">
	.peopleTable td { border:2px solid #555; text-align:center; }
	.person{ background-color:#AFA; }
	.personAlt{ background-color:#9ED; }
	.citySeparator { background-color:#CCC; height:4px;}
	.separator { background-color:#C77; height:6px;}
	.peopleTable { border-collapse:collapse; border:2px solid #555; }
</style>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../../jquery.tmpl.js" type="text/javascript"></script>
<script>
var people = [
	{
		firstName: "John",
		lastName: "Resig",
		url: "http://ejohn.org/",
		cities: [
			{ name: "Boston", state: "MA" },
			{ name: "San Francisco", state: "CA" }
		]
	},
	{
		firstName: "Dave",
		lastName: "Reed",
		url: "http://dave.org/"
	},
	{
		firstName: "Boris",
		lastName: "Moore",
		url: "http://boris.org/",
		cities: [
			{ name: "Redmond", state: "WA" },
			{ name: "Seattle", state: "WA" },
			{ name: "New York", state: "NY" }
		]
	}
];

function getName() {
	return this.data.firstName + " " + this.data.lastName;
}
		 
function alternate( item, array ) {
	return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
}

function cityNumber() {
	return $.inArray( this.data, this.parent.data.cities ) + 1;
}

function getTemplate( key ) {
	return $( "#tmpl" + key ).template();
}

$(function(){
	// Create named template, to be used in composition below
	$.template( "citySeparator", '<tr class="citySeparator"><td colspan="2"></td></tr>' );
	
	$( "#tmplPeople" )
		.tmpl( people )
		.appendTo( ".peopleTable" );
	$( "#tmplSeparator" )
		.tmpl()
		.appendTo( ".peopleTable" );
});
</script>

<script id="tmplPeople" type="text/x-jquery-tmpl">
	{{tmpl "#tmplSeparator"}}
	<tr class="${alternate(this.data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
	{{if cities}}
		{{tmpl(cities) getTemplate("City")}}
	{{/if}}
</script>

<script id="tmplSeparator" type="text/x-jquery-tmpl">
	<tr class="separator"><td colspan="2"></td></tr>
</script>

<script id="tmplCity" type="text/x-jquery-tmpl">
	{{tmpl "citySeparator"}}
	<tr class="${alternate(this.parent.data, people)}"><td colspan="2"><b><i>City ${cityNumber()}:</i></b></td></tr>
	<tr class="${alternate(this.parent.data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
</script>

<table class="peopleTable"><tbody></tbody></table>

