4

私は Handlebars.js を使用していますが、解決できない問題に行き詰まりました。

テンプレート内の配列を反復処理したいのですが、問題は、反復子に使用している式が配列ではなくゲッターであることです。

問題を示すコードは次のとおりです。

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、ゲッターを使用する が何もしないことです。これは、このjsFiddleで確認できます。

ゲッターを使用してこれを実行するクリーンな方法はありますか、またはヘルパーまたは補助関数のようなものを作成する必要がありますか?

ありがとう！

4

2 に答える 2

8

{{#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 ソースの実装を見て、それを少し整理したいかもしれませんが、それは演習として残しておきます。

于 2012-11-03T01:17:23.807 に答える