forked from BorisMoore/jquery-tmpl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
composition.html
91 lines (79 loc) · 2.37 KB
/
composition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!--
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>