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

Question

我处于这样一种情况，我希望能够拥有一个组件或助手，让我可以迭代多次并每次输出封闭的 block 。像这样的东西:

{{#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

根据文档，绑定(bind)助手不支持 block - 请参阅 here

您可以创建 increment-for组件如下。创建一个期望 times 的组件属性(property)。然后，您可以拥有 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}}

工作解决方案 here