function - Handlebars.js - Each 和 getter

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

问题是使用 getter 的 each 不执行任何操作。这可以在这个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/

您可能需要查看 Handlebars 源代码中的 {{#each}} 实现来稍微完善一下，但我会将其作为练习。