Handlebars.js - 每个和吸气剂

Question

我正在使用Handlebars.js并遇到了一个我无法解决的问题.

我想在模板中迭代一个数组,但问题是我用于迭代器的表达式是一个getter而不是一个数组.

用于说明问题的一段代码如下:

HTML:

<script id="template" type="text/x-handlebars">
    Accessing directly: {{array}} <br/>
    Accessing by getter: {{getArray}} <br/>

    <br/>

    Looping directly:
    <ul>
    {{#each array}}
        <li>{{this}}</li>
    {{/each}}
    </ul>

    <br/>

    Looping by getter:
    <ul>
    {{#each getArray}}
        <li>{{this}}</li>
    {{/each}}
    </ul>
</script>

<p id="content"></p>

JS:

var template = Handlebars.compile($("#template").html());
var element = {
    array: [0, 1, 2],

    getArray: function() {
        return this.array;
    }
};

$("#content").html(template(element));

问题是each使用getter的东西什么也没做.这可以在这个jsFiddle中看到.

有没有任何干净的方法来使用getter执行此操作,或者我应该编写帮助程序或类似辅助功能的东西？

谢谢!

Answer 1

{{#each}}期待一个数组,它不会理解任何其他内容.您可以为此添加一个简单的自定义帮助程序,fn.call(this)如果您期望这样,您只需记住使用:

getArray: function() {
    return this.array;
}

有权利this.像这样的东西可能会成功:

Handlebars.registerHelper('smart_each', function(a, block) {
    if(typeof a == 'function')
        a = a.call(this);
    var s = '';
    for(var i = 0; i < a.length; ++i)
        s += block(a[i]);
    return s;
});

演示:http://jsfiddle.net/ambiguous/yuPfD/

您可能希望查看{{#each}}Handlebars源代码中的实现,以便稍微修改一下,但我会将其作为练习.