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

Question

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

示例代码:

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

我尝试使用 isURL 嵌入一些原始 JavaScript block ，但仍然遇到相同的错误。

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

默认情况下，任何公共(public)内容也是可用的。

在这里，我使用公共(public)变量和join数组的原型(prototype)函数。

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>