Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
	<script src="http://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
5 
	<script src="../../jsrender.js" type="text/javascript"></script>
6 
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
7 
 
8 
	<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
9 
</head>
10 
<body>
11 
<a href="../demos.html">JsRender Demos</a><br />
12 
 
13 
<h3>Example Scenario: Custom tag and helper for assigning/getting local variables.</h3>
14 
 
15 
<div class="box label">
16 
<b>Note:</b> This scenario implies understanding the processing sequence of template rendering,
17 
<br />and is somewhat in contradiction with the 'logicless' and declarative philosophy.
18 
<br />However it illustrates the power of the custom tags and helper function extensibility,
19 
<br />and is useful in certain advanced scenarios.
20 
</div>
21 
 
22 
<div class="subhead">Declare <em>setvar</em> custom tag and <em>getvar</em> custom helper function</div>
23 
<pre>
24 
var vars = {};
25 
 
26 
$.views.tags({
27 
    setvar: function(key, value) {
28 
        ...
29 
        vars[key] = value;
30 
        ...
31 
    }
32 
});
33 
 
34 
$.views.helpers({
35 
    getvar: function(key) {
36 
        return vars[key];
37 
    }
38 
})
39 
</pre>
40 
 
41 
<div class="subhead">Use <em>{{setvar}}</em> to assign values or rendered content to variable</div>
42 
<pre>
43 
{{setvar "summary" languages/}}
44 
</pre>
45 
 
46 
<pre>
47 
{{setvar "summary"}}
48 
    &lt;b>Subtitles only:&lt;/b> {{>subtitles}}
49 
{{/setvar}}
50 
</pre>
51 
 
52 
 
53 
<div class="subhead">Use <em>{{:~getvar}}</em> to take values stored in the variable, and render them elsewhere in the template</div>
54 
<pre>
55 
{{:~getvar('summary')}}
56 
</pre>
57 
 
58 
<script id="movieTemplate" type="text/x-jsrender">
59 
	<tr>
60 
		<td>{{>title}}</td>
61 
		<td>
62 
			{{if languages}}
63 
				{{setvar "summary" languages/}}
64 
 
65 
				Alternative languages: <em>{{>languages}}</em>.
66 
			{{else}}
67 
				{{setvar "summary"}}
68 
					<b>Subtitles only:</b> {{>subtitles}}
69 
				{{/setvar}}
70 
 
71 
				Subtitles only. See summary column:
72 
			{{/if}}
73 
		</td>
74 
		<td>
75 
			<em>{{:title}}:</em><br/>
76 
			{{:~getvar('summary')}}
77 
		</td>
78 
	</tr>
79 
</script>
80 
 
81 
<table>
82 
	<thead><tr><th>title</th><th>languages</th><th>summary</th></tr></thead>
83 
	<tbody id="movieList"></tbody>
84 
</table>
85 
 
86 
<script type="text/javascript">
87 
 
88 
	var movies = [
89 
		{
90 
			title: "Meet Joe Black",
91 
			languages: "English and French"
92 
		},
93 
		{
94 
			title: "Eyes Wide Shut",
95 
			subtitles: "French and Spanish"
96 
		},
97 
		{
98 
			title: "City Hunter",
99 
			languages: "Mandarin and Chinese"
100 
		}
101 
	];
102 
 
103 
	(function() {
104 
		var vars = {};
105 
 
106 
		$.views.tags({
107 
			setvar: function(key, value) {
108 
				if (value) {
109 
					vars[key] = value;
110 
				} else {
111 
					vars[key] = this.tagCtx.render();
112 
				}
113 
				return "";
114 
			}
115 
		});
116 
 
117 
		$.views.helpers({
118 
			getvar: function(key) {
119 
				return vars[key];
120 
			}
121 
		})
122 
	})();
123 
 
124 
	$( "#movieList" ).html(
125 
		$( "#movieTemplate" ).render( movies )
126 
	);
127 
 
128 
</script>
129 
 
130 
</body>
131 
</html>