如何在jsRender中使用javascript变量?

时间:2012-02-08 08:01:04

标签: jsrender

我想使用如下。

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>{{=Title}}</td>
        <td>
            {{* var title = $ctx.GetTitleFunction($view);}}
            {{#each Languages}}
                <div>                   
                    <em>{{=Name}}</em>
                    <em>({{* title;}})</em>
                </div>
            {{/each}}
        </td>
    </tr>
</script>

<script type="text/javascript">

    function GetTitle(data){
        return "Title : " + data.Title;
    }

    var movies = [
        {
            Title: "Meet Joe Black",
            Languages: [
                { Name: "English" },
                { Name: "French" }
            ]
        },
        {
            Title: "Eyes Wide Shut",
            Languages: [
                { Name: "French" },
                { Name: "Mandarin" },
                { Name: "Spanish" }
            ]
        }
    ];

    $.views.allowCode = true;
    $.views.registerHelpers({ GetTitleFunction: GetTitle });
    $( "#movieList" ).html(
        $( "#movieTemplate" ).render( movies )
    );

</script>  

我无法使用{{* title;}}或{{* = title}}来呈现javascript变量 如何在javascript变量中呈现值?

1 个答案:

答案 0 :(得分:11)

我创建了一个小提琴,向您展示如何使用辅助函数返回标题。它使用新的beta候选语法组合了辅助函数和视图路径。我不需要使用allowCode来做这个... allowCode让你定义变量和进程逻辑,但它不能完全访问给定的javascript(为了安全)。无论如何,我认为没有allowCode,代码会更清晰,但你打电话:)

http://jsfiddle.net/johnpapa/LqchY/

请注意,Boris发布的新更改:http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html

以下代码有以下显着变化:

  1. 新语法是使用{{:yourProperty}}呈现属性值。
  2. {{#each}}已替换为{{for}}
  3. 辅助函数现在用tilda~而不是ctx
  4. 引用
  5. 当在for循环内部时,您可以使用#view.parent或简单地#parent访问父上下文(因为隐含了视图)。因此,在数组循环内部,您必须有1个父级访问数组,另一个父级将您带到数组的父级,数据会获取数据。它有点冗长,但它允许您访问上下文。 {{:#parent.parent.data.Title}}
  6. [已更新] 您可以传入要使用的数据,也可以访问该功能内的view.data。
  7. 我希望这有帮助!

    <script id="movieTemplate" type="text/x-jsrender">
        <tr>
            <td>{{:Title}}</td>
            <td>
                <!-- Use the helper function to display the title -->
                {{:~GetTitleFunction()}}
                {{for Languages}}
                    <div>                   
                        <em>{{:Name}}</em>
                        <!-- Use the view path for parent. could also do #view.parent.parent.data -->
                        <em>( {{:#parent.parent.data.Title}} )</em>
                        <!-- Use the helper function and view path  -->
                        <em>{{:~GetTitleFunction(#parent.parent.data)}}</em>
                    </div>
                {{/for}}
            </td>
        </tr>
    </script>