如何使用 EmberJs/Handlebars 制作 for (i=0; i<n; i++)？ [复制]答案

【问题标题】：How to make a for (i=0; i<n; i++) with EmberJs/Handlebars? [duplicate]如何使用 EmberJs/Handlebars 制作 for (i=0; i<n; i++)？ [复制]
【发布时间】：2012-10-31 17:17:39
【问题描述】：

可能重复：
Custom for-loop helper for EmberJS/HandlebarsJS

我将Handlebars 用于网站，我有一个重要问题：

有时你给你的模板一个完整的数组，你只想显示第 n 个元素...... 你怎么用车把做到这一点？我找不到...

【问题讨论】：

我们不能使用来自handlebarsjs.com/block_helpers.html 的简单迭代器示例，因为我使用了一个稍后填充的 ArrayController，并且此函数在发生变化时不会更新。

标签： data-binding for-loop ember.js handlebars.js view-helpers

【解决方案1】：

这就是我的做法（而且效果很好！！！）

首先，我的模型中有一个“预览”属性/函数，它只在数组中返回 arrayController：

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

然后，我添加了一个新的 Handlebars 助手：

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>

就是这样。

我知道这不是最佳的，所以谁知道如何改进它，请告诉我:)

【讨论】：