data-binding - for (i=0; i) の作り方 重複の可能性: EmberJS/Handleba

Question

重複の可能性:
EmberJS/HandlebarsJS のカスタム for ループ ヘルパー

Web サイトにハンドルバーを使用していますが、重要な質問があります。

場合によっては、テンプレートに完全な配列を指定して、最初の n 要素だけを表示したい場合があります...ハンドルバーでそれを行うにはどうすればよいでしょうか? 見つからない...

Answer 1

これが私がやった方法です（そしてそれはうまくいきます!!!）

まず、モデルに「プレビュー」プロパティ/関数がありました。これは、arrayController を配列で返すだけです。

objectToLoop = Ember.Object.extend({ 
        ...
    arrayController: [],
    preview: function() {
        return this.get('arrayController').toArray();
    }.property('arrayController.@each'),
        ...
});

次に、新しいハンドルバー ヘルパーを追加します。

Handlebars.registerHelper("for", function forLoop(arrayToLoop, options) {
    var data = Ember.Handlebars.get(this, arrayToLoop, options.fn);

    if (data.length == 0) {
        return 'Chargement...';
    }

    filtered = data.slice(options.hash.start || 0, options.hash.end || data.length);

    var ret = "";
    for(var i=0; i< filtered.length; i++) {
        ret = ret + options.fn(filtered[i]);
    }
    return ret;     
});

そして、このすべての魔法のおかげで、自分のビューでそれを呼び出すことができます:

<script type="text/x-handlebars"> 
    <ul>
        {{#bind objectToLoop.preview}}
            {{#for this end=4}}
                <li>{{{someProperty}}}</li>
            {{/for}}
        {{/bind}}
    </ul>
</script>

以上です。

私はそれが最適ではないことを知っているので、それを改善する方法についてアイデアを持っている人は誰でも教えてください:)