Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 21d2a8f3b3
104 lines (93 sloc) 2.942 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample illustrates using the {{if}}, {{each}} and {{tmpl}} template tags, with parameters.
-->
<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; }
.separator { background-color:#C77; height:6px;}
.cityseparator { background-color:#CCC; height:4px;}
.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 type="text/javascript">
$(function(){
$("#tmplPeople")
.tmpl( people )
.appendTo(".peopleTable");
});
var people = [
{
firstName: "John",
lastName: "Resig",
url: "http://ejohn.org/",
cities: [ "BSTN", "NY", "SF" ]
},
{
firstName: "Dave",
lastName: "Reed",
url: "http://dave.org/",
cities: [ "RDMD", "STL", "SF", "LA" ]
},
{
firstName: "Boris",
lastName: "Moore",
url: "http://boris.org/",
cities: [ "RDMD" ]
}
];
var allCities = {
BSTN: { name: "Boston", state: "MA", weather: "Cold" },
SF: { name: "San Francisco", state: "CA", weather: "Warm" },
STL: { name: "Seattle", state: "WA", weather: "Wet" },
RDMD: { name: "Redmond", state: "WA", weather: "Wet" },
LA: { name: "Los Angeles", state: "CA", weather: "Hot" },
NY: { name: "New York", state: "NY", weather: "Variable" }
};
function getName() {
return this.data.firstName + " " + this.data.lastName;
}
function getCities( begin, end ) {
return $.map(this.data.cities.slice(begin, end), function(city) {
return allCities[city];
});
}
function getCityCount( begin, end ) {
return this.data.cities.slice(begin, end).length;
}
function alternate() {
return ($.inArray( this.data, people ) % 2) ? "personAlt" : "person";
}
var startIndex = 1, endIndex = 3;
</script>
<script id="tmplPeople" type="text/x-jquery-tmpl">
<tr class="${alternate()}"><td colspan="3"><a href="${url}">${getName()}</a></td></tr>
{{tmpl "#tmplSeparator"}}
{{if getCityCount(startIndex, endIndex)}}
<tr class="${alternate()}"><td colspan="3"><i>Favorite Cities</i></td></tr>
{{each getCities(startIndex, endIndex)}}
{{tmpl(null, {type:"city"}) "#tmplSeparator"}}
<tr class="${alternate()}">
<td>${$index + 1}</td>
<td><b>${name}</b></td>
<td>${state}</td>
</tr>
<tr class="${alternate()}"><td colspan="3"><i>${weather}...</i></td></tr>
{{/each}}
{{tmpl "#tmplSeparator"}}
{{/if}}
</script>
<script id="tmplSeparator" type="text/x-jquery-tmpl">
<tr class="${$item.type}separator"><td colspan="3"></td></tr>
</script>
<table class="peopleTable"><tbody>
<tr class="separator"><td colspan="3"></td></tr>
</tbody></table>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.