Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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>