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

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

根据文档，绑定助手不支持块 - 参见 here

您可以创建一个 increment-for 组件，如下所示。创建一个需要 times 属性的组件。然后，你可以有一个 numOfTimes 属性那个 returns 一个长度为 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}}

工作解决方案here

Answer 2

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

通过使用 repeat 帮助程序，可以轻松创建循环：

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

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

Create a for loop that will iterate a certain number of times in Ember-CLI

ember.js

ember-cli