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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!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" />
<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="../demos.html">JsRender Demos</a><br />
<h3>Example Scenario: Creating custom helpers to iterate through fields</h3>
<!---------------------- First Example ---------------------->
<div class="subhead">Using a custom {{fields}} tag:</div>
<pre>
{{fields details}}
<b>{{>~key}}</b>: {{>#data}}
{{/fields}}
</pre>
<table>
<thead><tr><th>Title</th><th>Details</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
<!---------------------- Second Example ---------------------->
<div class="subhead">Using a custom ~getFields() helper function:</div>
<pre>
{{for ~getFields(details)}}
<b>{{>key}}</b>: {{>value}}
{{/for}}
</pre>
<table>
<thead><tr><th>Title</th><th>Details</th></tr></thead>
<tbody id="movieList2"></tbody>
</table>
<!--=================== Demo ===================-->
<!------------------ Templates ------------------>
<script id="movieTemplate1" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{fields details}}
<div>
<b>{{>~key}}</b>: {{>#data}}
</div>
{{/fields}}
</td>
</tr>
</script>
<script id="movieTemplate2" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for ~getFields(details)}}
<div>
<b>{{>key}}</b>: {{>value}}
</div>
{{/for}}
</td>
</tr>
</script>
<!------------------ Script ------------------>
<script type="text/javascript">
$.views.tags({
fields: function( object ) {
var key,
ret = "";
for ( key in object ) {
if ( object.hasOwnProperty( key )) {
// For each property/field, render the content of the {{fields object}} tag, with "~key" as template parameter
ret += this.renderContent( object[ key ], { key: key });
}
}
return ret;
}
});
//Define a custom getFields helper function to iterate over fields and return
$.views.helpers({
getFields: function( object ) {
var key, value,
fieldsArray = [];
for ( key in object ) {
if ( object.hasOwnProperty( key )) {
value = object[ key ];
// For each property/field add an object to the array, with key and value
fieldsArray.push({
key: key,
value: value
});
}
}
// Return the array, to be rendered using {{for ~fields(object)}}
return fieldsArray;
}
});
var movies = [
{
title: "Meet Joe Black",
details: {
director: "John",
date: "1996",
language: "English"
}
},
{
title: "Eyes Wide Shut",
details: {
type: "Comedy",
date: "1940"
}
}
];
$( "#movieList1" ).html(
$( "#movieTemplate1" ).render( movies )
);
$( "#movieList2" ).html(
$( "#movieTemplate2" ).render( movies )
);
</script>
</body>
</html>
|
