创建一个在Ember-CLI中迭代一定次数的for循环

Question

我处于这样一种情况,我希望能够有一个组件或帮助器,允许我迭代多次并每次输出封闭的块.像这样的东西:

{{#incremented-for 2}}
    block to output
{{/incremented-for}}

我尝试将其设置为组件,但无法找到使其工作的方法.我还尝试将其设置为帮助程序,并且能够找到一些似乎应该工作的代码:

export function incrementedFor(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i)
        accum += block.fn(i);
    return accum;
}

export default Ember.Handlebars.makeBoundHelper(incrementedFor);

但我得到一个错误,上面写着:

Uncaught Error: Assertion Failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.

有没有人想过为什么这种方法可能不起作用,或者更好的是,在Ember-cli中更好的方法呢？

Answer 1

作为@Kalman答案的补充，您可以使用ember-composable-helper插件，它甚至更简单。

通过使用重复帮助器，可以轻松地创建循环：

{{#each (repeat 3) as |empty|}}
  I will be rendered 3 times
{{/each}}

Answer 2

根据文档,绑定帮助程序不支持块 - 请参阅此处

您可以increment-for按如下方式创建组件.创建一个期望times属性的组件.然后,您可以拥有一个numOfTimes返回长度数组的属性times.最后,您可以使用#each和yield帮助器的组合来显示您的内容.

组件代码:

import Ember from 'ember';

export default Ember.Component.extend({
  numOfTimes: Ember.computed('times', function() {
    const times = parseInt(this.get('times'));
    return new Array(times);
  })
});

组件模板:

{{#each numOfTimes as |time|}}
  {{ yield }}
{{/each}}

组件用法:

{{#increment-for times=2 }}
  <div>How goes it?</div>
{{/increment-for}}

工作方案在这里