这是一个基于jquery-tmpl API文档中代码的简单示例。我想使用嵌套的{{tmpl}}标签-这里是“titleTemplate”。我想在外部模板和嵌套模板中使用各种辅助函数。此示例具有一个称为“embolden”的简单辅助函数,该函数已传递给初始的tmpl()调用。
以下作品。我可以将Name数据包含在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>
最佳答案
以您的示例为例,您需要做的就是
{{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上的代码示例。