Question

我有一个帮助程序JavaScript文件，但我无法在我的模板中使用它：它会抛出错误，说明helper未定义。

示例代码：

<img alt="" src="<%= helper.isURL(images[i].small) ? images[i].small : '/img/' + images[i].small %>">

我尝试使用isURL嵌入一些原始javascript块，但我仍然遇到同样的错误。

<script>function isURL() {}</script>

Answer 1

下划线模板可以使用普通JS。您可以在编译模板函数使用的上下文对象中公开您想要的任何内容。

在下面的示例中，我创建了一个简化的Helper对象，该对象将传递给扩展的data对象中的已编译模板函数。

var data = { test: "value" },

    // simplified mock of the helpers
    Helper = { isUrl: function(){ return true; } },
    
    // compiled template function
    template = _.template('result: <%= Helper.isUrl(data.test) ? data.test : "default" %>'),
    
    // the same data, now including the Helper
    extendedData = _.extend({ Helper: Helper }, data),
    
    // rendered template as a string
    rendered = template(extendedData);

console.log(rendered);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

默认情况下也可以使用任何公开信息。

在这里，我使用了一个公共变量和join Array的原型函数。

window.test = "public data";

var data = { arr: ['test', 'test2'] },
    template = _.template('arr: <%= arr.join(", ") %>\ntest: <%= test %>');

console.log(template(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

如何在Underscore模板中使用自定义函数？

1 个答案: