EmberJS/HandlebarsJS 的自定义 for 循环助手答案

【问题标题】：Custom for-loop helper for EmberJS/HandlebarsJSEmberJS/HandlebarsJS 的自定义 for 循环助手
【发布时间】：2012-04-25 00:10:53
【问题描述】：

两小时前我开始了：Nested HandlebarsJS #each helpers with EmberJS not working

在我自己想出一个可以接受的临时解决方案后不久，问题仍未得到解答。我的问题并没有就此停止。

我现在正在尝试制作一个自定义帮助器，它将遍历对象数组，但不包括第一个索引 - 几乎是：for(i = 1; i < length; i++) {}。我在网站上读过，您必须获取上下文的长度并将其传递给选项 - 考虑到您的函数看起来像：forLoop(context, options)。

然而，上下文是一个字符串而不是一个实际的对象。当您执行.length 时，您将获得字符串的长度，而不是数组的大小。当我将它传递给选项时，什么也没有发生 - 更不用说浏览器冻结了。

然后我首先尝试在将其传递给选项之前执行getPath，这将返回一个空字符串。

我应该怎么做呢，我之前只为 HandlebarsJS 编写了 for 循环代码，并且有效，但 EmberJS 似乎没有接受它，为什么？

编辑：我也非常关注：http://handlebarsjs.com/block_helpers.html -> 简单迭代器

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

我自己尝试了很长时间后解决了这个问题。

HandlebarsJS 方法（如网站上所述）不再对 EmberJS 有效，现在如下：

function forLoop(context, options) {
    var object = Ember.getPath(options.contexts[0], context);
    var startIndex = options.hash.start || 0;

    for(i = startIndex; i < object.length; i++) {
        options(object[i]);
    }
}

哎呀，您甚至可以扩展 for 循环以包含索引值！

function forLoop(context, options) {
    var object = Ember.getPath(options.contexts[0], context);
    var startIndex = options.hash.start || 0;

    for(i = startIndex; i < object.length; i++) {
        object[i].index = i;

        options(object[i]);
    }
}

这是一个具有可变起始索引的工作 for 循环。您可以像这样在模板中使用它：

{{#for anArray start=1}}
    <p>Item #{{unbound index}}</p>
{{/for}}

【讨论】：

【解决方案2】：

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

首先，我在我的模型中有一个“预览”属性/函数，它只是在一个数组中返回 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>

就是这样。

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

【讨论】：