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

时间:2017-03-06 23:26:08

标签: javascript underscore.js underscore.js-templating

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

示例代码:

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

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

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

1 个答案:

答案 0 :(得分: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>