Autoría | Ultima modificación | Ver Log |
<!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>