Question

我有一个下划线模板，看起来大致如下：

<script type="text/template" id="list-template">
    <%= listHeaderTemplate(); %>
    stuff that
    displays a list
    <%= listFooterTemplate(); %>
</script>

<script type="text/template" id="list-footer-template">
    <%= foo %>
</script>

<script>
listTemplate = _.template($("#list-template").html());
listHeaderTemplate = _.template($("#list-header-template").html());
listFooterTemplate = _.template($("#list-footer-template").html());
</script>

我想要做的是将传递给listTemplate（）的完整变量集传递给listFooterTemplate（）。例如，

listTemplate({foo: "foo"});

我可以通过修改list-template中listHeaderTemplate（）/ listFooterTemplate（）的调用来将本地包装到字典中（即listFooterTemplate（{foo：foo}）;）但这看起来相当繁重，特别是当正在使用大量变量，它需要我在list-template中知道list-footer-template可能使用的变量。

Answer 1

当您编译Underscore模板时，Underscore会将您的模板翻出来并构建一个或多或少看起来像这样的函数：

function(obj) {
    // Some set up...
    with(obj || {}) {
        // The template as JavaScript...
    }
    return theTemplateText;
}

您不能依赖于被称为obj的参数，这种参数很快就会中断。您应该可以安全访问arguments对象。让arguments允许您使用与当前函数完全相同的参数调用其他函数而不必知道参数是什么，只需使用apply。

如果您的模板可以使用listHeaderTemplate和listFooterTemplate，则只需说：

<script type="text/template" id="list-template">
    <%= listHeaderTemplate.apply(this, arguments) %>
    stuff that
    displays a list
    <%= listFooterTemplate.apply(this, arguments) %>
</script>

一种简单的方法是将这些函数作为参数传递给模板：

var listTemplate       = _.template($("#list-template").html());
var listHeaderTemplate = _.template($("#list-header-template").html());
var listFooterTemplate = _.template($("#list-footer-template").html());

var html = listTemplate({
    foo: 11,
    listHeaderTemplate: listHeaderTemplate,
    listFooterTemplate: listFooterTemplate
});

演示：http://jsfiddle.net/ambiguous/vwjm1kta/

Answer 2

或者，可以通过JSON.stringify和HTML data- *属性传递数据对象。

<script type="text/template" id="list-template">
<div id="my-list-template" data-us-tmpl-data="<%= JSON.stringify(data) %>">
</div>
</script>

下划线模板：将变量从父模板传递到子模板

2 个答案: