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属性，该属性返回长度为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}}

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

2 个答案: