jquery - 如何调用 jquery-templates 中嵌套的 {{tmpl}} 标签中的函数？

Question

这是一个基于 jquery-tmpl API 文档中的代码的简单示例。我想使用嵌套的 {{tmpl}} 标签 - 这里是“titleTemplate”。我想在外部模板和嵌套模板中使用各种辅助函数。此示例有一个名为“embolden”的简单辅助函数，该函数被传递给初始 tmpl() 调用。

以下作品。我能够在 titleTemplate 中放大名称数据。但看起来很乱。有没有更干净的方法来做到这一点？由于 formatHelpers 被传递到原始 tmpl() 调用中，是否真的有必要将其也传递到 {{tmpl}} 标记中？

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data, formatHelpers) "#titleTemplate"}}
    <tr class="detail"><td>Director: ${$item.embolden(Director)}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${$item.embolden($item.data.Name)}</td></tr>
</script>

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

<script>
var formatHelpers = { 
    embolden: function(i) {
        return "*" + i + "*";
    }
};

var movies = [
    { Name: "The Red Violin", Director: "François Girard" },
    { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" },
    { Name: "The Inheritance", Director: "Mauro Bolognini" }
];

/* Render the template with the movies data */
$( "#movieTemplate").tmpl(movies, formatHelpers).appendTo("#movieList");
</script>

Answer 1

根据您的示例，您所需要做的就是

{{tmpl($item.data, $item) "#titleTemplate"}}

jsfiddle 上的代码示例.

执行此操作的另一种方法是在全局范围内定义 formatHelpers，您应该能够直接在模板中调用它们。

var formatHelpers = { 
    embolden: function(i) {
        return "*" + i + "*";
    }
};
$(function() {
    var movies = [
        {
        Name: "The Red Violin",
        Director: "François Girard"},
    {
        Name: "Eyes Wide Shut",
        Director: "Stanley Kubrick"},
    {
        Name: "The Inheritance",
        Director: "Mauro Bolognini"}
    ];

    $("#movieTemplate").tmpl(movies).appendTo("#movieList");
});

在模板内部，您可以执行以下操作:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data) "#titleTemplate"}}
    <tr class="detail"><td>Director: ${formatHelpers.embolden(Director)}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${formatHelpers.embolden(Name)}</td></tr>
</script>

jsfiddle 上的代码示例.