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="../../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>Template context: Passing in additional helpers to a render() call</h3>

<div class="subhead">Passing in contextual variables or helper functions, using the helpersOrContext parameter of <em>...render( data, helpersOrContext );</em></div>
<pre>
$( selector ).render( data, {
    reverseSort: reverse,
    format: myFormatFunction,
    buttonCaption: function(val) {
        ...
    }
})
</pre>

<div class="subhead">Use <em>~name</em> to access context variables or helpers by name - whether passed in with options,</div>
<div class="subhead">registered globally as helpers, or registered as helpers for a specific template.</div>

<pre>
&lt;th>&lt;button>{{>~buttonCaption('sort')}}&lt;/button>&lt;/th>
...
&lt;td>{{>~format(title)}}&lt;/td>
...
&lt;td>{{sort languages reverse=~reverseSort}}...{{/sort}}&lt;/td>
</pre>

<!--================ Demo ================-->

<script id="movieTemplate" type="text/x-jsrender">
        <thead>
                <tr>
                        <th>Title <button id="formatBtn">{{>~buttonCaption('case')}}</button></th>
                        <th><button id="sortBtn">{{>~buttonCaption('sort')}}</button></th>
                </tr>
        </thead>
        <tbody>
                {{for #data}}
                <tr>
                        <td>{{>~format(title)}}</td>
                        <td>
                                {{sort languages reverse=~reverseSort}}
                                        <div>
                                                <b>{{>name}}</b>
                                        </div>
                                {{/sort}}
                        </td>
                </tr>
                {{/for}}
        </tbody>
</script>

<table id="movieList"></table>
<br />

<script type="text/javascript">

        $.views.tags({

                // Tag to reverse-sort an array
                sort: function( array ){
                        var ret = "";
                        if ( this.tagCtx.props.reverse ) {
                                // Render in reverse order
                                for ( var i = array.length; i; i-- ) {
                                        ret += this.tagCtx.render( array[ i - 1 ] );
                                }
                        } else {
                                // Render in original order
                                ret += this.tagCtx.render( array );
                        }
                        return ret;
                }

        });

        var reverse = false,
                upperCase = false,
                movies = [
                        {
                                title: "Meet Joe Black",
                                languages: [
                                        { name: "English" },
                                        { name: "French" }
                                ]
                        },
                        {
                                title: "Eyes Wide Shut",
                                languages: [
                                        { name: "French" },
                                        { name: "German" },
                                        { name: "Spanish" }
                                ]
                        }
                ];

        function myFormatFunction(value) {
                return upperCase ? value.toUpperCase() : value.toLowerCase();
        }

        $("#movieList")
                .on("click", "#sortBtn", function(){
                        reverse = !reverse;
                        renderList();
                })
                .on("click", "#formatBtn", function(){
                        upperCase = !upperCase;
                        renderList();
                });

        function renderList() {
                $( "#movieList" ).html(
                        $( "#movieTemplate" ).render( [movies], {
                                reverseSort: reverse,
                                format: myFormatFunction,
                                buttonCaption: function(val) {
                                        if (val === 'sort') {
                                                return reverse ? "Sort increasing" : "Sort decreasing";
                                        }
                                        return upperCase ? "to lower" : "to upper";
                                }
                        })
                );
        }
        renderList();
</script>

</body>
</html>