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>