如何在 jsRender 中使用 javascript 变量？

Question

我想使用如下。

<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 变量中呈现值？

Answer 1

我创建了一个小提琴来向您展示如何使用辅助函数来返回标题。它使用新的 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. 在 for 循环中时，您可以使用 #view.parent 或简单地使用 #parent 访问父上下文（因为隐含了视图）。因此，在数组循环中，您必须有 1 个父级将您带到数组，另一个父级将您带到数组的父级，而 data 会为您提供数据。它有点冗长，但它允许您访问上下文。 {{:#parent.parent.data.Title}}
5. [已更新]您可以传入要使用的数据，也可以访问函数内部的 view.data。

我希望这会有所帮助！

<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>