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
91
92
93
94
95
96
97
98
|
<!DOCTYPE html>
<html>
<head>
<script src="/usr/share/javascript/jsquery/jquery.min.js" type="text/javascript"></script>
<script src="/usr/share/javascript/jsrender/jsrender.min.js" type="text/javascript"></script>
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="../demos.html">JsRender Demos</a><br />
<h3>Accessing paths</h3>
<script id="peopleTemplate" type="text/x-jsrender">
<b>{{:#index+1}}:</b> {{>firstName}} {{>lastName}}:
<br/>
{{for address tmpl="#addressTemplate"/}}
{{if phones cells}}
<div>
Phones:
{{for phones cells}} <b>{{>#data}}</b> ({{>#parent.parent.data.firstName}}'s){{/for}}
</div>
{{/if}}
<br/>
<i>
{{>firstName}}
{{if address.street}}
lives in {{>address.street}}.
{{else}}
has no street address...
{{/if}}
</i>
<hr/>
</script>
<script id="addressTemplate" type="text/x-jsrender">
<div>
{{if street}}
{{>street}}
{{else}}
<i>Somewhere</i> in
{{/if}}
{{>city}}
</div>
</script>
<div id="peopleList"></div>
<script type="text/javascript">
var people = [
{
firstName: "Pete",
lastName: "Ruffles",
address: {
street: "1 1st Ave NE",
city: "Bellevue"
},
cells: ["425 666 3455", "425 222 1111"]
},
{
firstName: "Xavier",
lastName: "NoStreet",
address: {
city: "Redmond"
},
phones: "222 666 3455",
cells: ["444 666 3455", "999 222 1111"]
},
{
firstName: "Christie",
lastName: "Sutherland",
address: {
street: "222 2nd Ave NE",
city: "Redmond"
}
}
];
$.views.tags({
notLast: function( content ) {
var array = this.parent.data;
return array[ array.length - 1 ] === this.data ? "" : content( this );
}
});
$( "#peopleList" ).html(
$( "#peopleTemplate" ).render( people )
);
</script>
</body>
</html>
|
