demos/samplesTmplPlus/composition.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample is equivalent to the samplesCore/composition.html sample,
except that it uses jquery.tmplPlus.js in order to take advantage
of the alternative API:
    $( targetContainer ).append( template, data, options );
rather than
    $( template ).tmpl( data, options ).appendTo( targetContainer );
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<body>

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jquery.tmpl.js" type="text/javascript"></script>
<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
<script type="text/javascript">
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(){
	$( ".peopleTable" )
		.append( "#tmplPeople", people );
	$( ".peopleTable" )
		.append( "#tmplSeparator", {} );
});
</script>

<script id="tmplPeople" type="text/x-jquery-tmpl">
	{{tmpl "#tmplSeparator"}}
	<tr class="${alternate($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="tmplCitySeparator" type="text/x-jquery-tmpl">
	<tr class="citySeparator"><td colspan="2"></td></tr>
</script>

<script id="tmplCity" type="text/x-jquery-tmpl">
	{{tmpl "#tmplCitySeparator"}}
	<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>

</body>
</html>