-
Notifications
You must be signed in to change notification settings - Fork 341
/
04_assigning-variables-scenario.html
131 lines (109 loc) · 2.75 KB
/
04_assigning-variables-scenario.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
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
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="../../jsrender.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: Custom tag and helper for assigning/getting local variables.</h3>
<div class="box label">
<b>Note:</b> This scenario implies understanding the processing sequence of template rendering,
<br />and is somewhat in contradiction with the 'logicless' and declarative philosophy.
<br />However it illustrates the power of the custom tags and helper function extensibility,
<br />and is useful in certain advanced scenarios.
</div>
<div class="subhead">Declare <em>setvar</em> custom tag and <em>getvar</em> custom helper function</div>
<pre>
var vars = {};
$.views.tags({
setvar: function(key, value) {
...
vars[key] = value;
...
}
});
$.views.helpers({
getvar: function(key) {
return vars[key];
}
})
</pre>
<div class="subhead">Use <em>{{setvar}}</em> to assign values or rendered content to variable</div>
<pre>
{{setvar "summary" languages/}}
</pre>
<pre>
{{setvar "summary"}}
<b>Subtitles only:</b> {{>subtitles}}
{{/setvar}}
</pre>
<div class="subhead">Use <em>{{:~getvar}}</em> to take values stored in the variable, and render them elsewhere in the template</div>
<pre>
{{:~getvar('summary')}}
</pre>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{if languages}}
{{setvar "summary" languages/}}
Alternative languages: <em>{{>languages}}</em>.
{{else}}
{{setvar "summary"}}
<b>Subtitles only:</b> {{>subtitles}}
{{/setvar}}
Subtitles only. See summary column:
{{/if}}
</td>
<td>
<em>{{:title}}:</em><br/>
{{:~getvar('summary')}}
</td>
</tr>
</script>
<table>
<thead><tr><th>title</th><th>languages</th><th>summary</th></tr></thead>
<tbody id="movieList"></tbody>
</table>
<script type="text/javascript">
var movies = [
{
title: "Meet Joe Black",
languages: "English and French"
},
{
title: "Eyes Wide Shut",
subtitles: "French and Spanish"
},
{
title: "City Hunter",
languages: "Mandarin and Chinese"
}
];
(function() {
var vars = {};
$.views.tags({
setvar: function(key, value) {
if (value) {
vars[key] = value;
} else {
vars[key] = this.tagCtx.render();
}
return "";
}
});
$.views.helpers({
getvar: function(key) {
return vars[key];
}
})
})();
$( "#movieList" ).html(
$( "#movieTemplate" ).render( movies )
);
</script>
</body>
</html>