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="../../jquery-1.8.0.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: Inserting "and" and "," separators between words</h3>
<!---------------------- First Example ---------------------->
<div class="subhead">Example 1: Expressions in tags, and template parameters ({{if}} tag):</div>
<pre>
{{for languages ~count=languages.length}}
...
{{if #index === ~count-2}} and {{else #index < ~count-2}}, {{/if}}
...
{{/for}}
</pre>
<script id="movieTemplate1" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for languages ~count=languages.length}}
{{>name}}{{if #index === ~count-2}} and {{else #index < ~count-2}}, {{/if}}
{{/for}}
</td>
</tr>
</script>
<table>
<thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList1"></tbody>
</table>
<!---------------------- Second Example ---------------------->
<div class="subhead">Example 2: Expressions in tags, and template parameters (ternary expression):</div>
<pre>
{{for languages ~count=languages.length}}
...
{{: #index === ~count-2 ? " and " : #index < ~count-2 ? ", " : ""}}
...
{{/for}}
</pre>
<script id="movieTemplate2" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for languages ~count=languages.length}}
{{>name}}{{: #index === ~count-2 ? " and " : #index < ~count-2 ? ", " : ""}}
{{/for}}
</td>
</tr>
</script>
<table>
<thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList2"></tbody>
</table>
<br />
<!---------------------- Third Example ---------------------->
<div class="subhead">Example 3: Custom helper functions:</div>
<pre>
{{for languages}}
...
{{if ~nextToLast()}} and {{else ~notLast()}}, {{/if}}
...
{{/for}}
</pre>
<script id="movieTemplate3" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for languages}}
{{>name}}{{if ~nextToLast()}} and {{else ~notLast()}}, {{/if}}
{{/for}}
</td>
</tr>
</script>
<table>
<thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList3"></tbody>
</table>
<br />
<!---------------------- Fourth Example ---------------------->
<h3>Using "allowCode"</h3>
<div class="box label">
<b>Note:</b> The allowCode feature is powerful, but leads to poor separation of concerns, and poor maintainability.
<br />It is therefore only available as an opt-in feature on a per template basis.
<br /><br />The following two examples illustrate its use, but are not the recommended approach. The built-in expression support,
<br />custom tags, helper functions etc. provide a better solution for almost all scenarios, as in the two examples above.</div>
<div class="subhead">Example 4: allowCode, for program flow - with if(...) { ... }:</div>
<pre>
$.templates( "movieTmpl", {
markup: "#movieTemplate",
allowCode: true
});
{{*
if ( myexpression ) {
}}
...
{{*
}
}}
</pre>
<script id="movieTemplate4" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for languages}}
{{>name}}{{*
if ( view.index === view.parent.data.length-2 ) {
}} and {{*
} else if ( view.index < view.parent.data.length-2 ) {
}}, {{* } }}
{{/for}}
</td>
</tr>
</script>
<table>
<thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList4"></tbody>
</table>
<!---------------------- Fifth Example ---------------------->
<div class="subhead">Example 5: allowCode, for returning content - with ternary expression:</div>
<pre>
$.templates( "movieTmpl", {
markup: "#movieTemplate",
allowCode: true
});
{{*: myexpression ? ... : ...}}
</pre>
<script id="movieTemplate5" type="text/x-jsrender">
<tr>
<td>{{>title}}</td>
<td>
{{for languages}}
{{>name}}
{{*: view.index === view.parent.data.length-2 ? " and " : view.index < view.parent.data.length-2 ? ", " : ""}}
{{/for}}
</td>
</tr>
</script>
<table>
<thead><tr><th>Title</th><th>Languages</th></tr></thead>
<tbody id="movieList5"></tbody>
</table>
<script type="text/javascript">
$.views.helpers({
nextToLast: function() {
return this.index === this.parent.data.length-2;
},
notLast: function() {
return this.index !== this.parent.data.length-1;
}
});
var movies = [
{
title: "Meet Joe Black",
languages: [
{ name: "English" },
{ name: "French" }
],
subtitles: [
{ name: "English" },
{ name: "French" },
{ name: "Chinese" }
]
},
{
title: "Eyes Wide Shut",
languages: [
{ name: "French" },
{ name: "German" },
{ name: "Spanish" }
],
subtitles: [
{ name: "English" }
]
}
];
$.templates({
movieTmpl1: "#movieTemplate1",
movieTmpl2: "#movieTemplate2",
movieTmpl3: "#movieTemplate3",
movieTmpl4: {
markup: "#movieTemplate3",
allowCode: true,
useViews: true // Since the {{* ... }} code inserted uses views (view.parent...) we make sure the default optimization of not using views when not necessary
},
movieTmpl5: {
markup: "#movieTemplate4",
allowCode: true,
useViews: true
}
});
// Note that by default, rendering simple templates does not create a view hierarchy - which allows for optimized performance.
// For the movieList3 and movieList4 we are inserting code that does depend on the view hierarchy (e.g. view.parent... ) so for
// those templates we have set useViews: true. We could alternatively use $.views.settings.useViews = true, as a global setting...
$( "#movieList1" ).html(
$.render.movieTmpl1( movies )
);
$( "#movieList2" ).html(
$.render.movieTmpl2( movies )
);
$( "#movieList3" ).html(
$.render.movieTmpl3( movies )
);
$( "#movieList4" ).html(
$.render.movieTmpl4( movies )
);
$( "#movieList5" ).html(
$.render.movieTmpl4( movies )
);
</script>
</body>
</html>