Ember.js 如何在创建新元素时从每个循环调用操作？

我需要根据索引添加一个类名。此外，我还有许多其他条件事件要添加到每个元素中。出于这个原因，我想添加一个对元素create的回调

如何从每个迭代器调用函数。我试着这样做：

{{#each model as |flower index|}}
    <li class="(action 'setting()')">{{flower}}</li> //trying to call
{{/each}}

{{#each model as |flower index|}}
  {{flower-item flower=flower index=index}}
{{/each}}

// Imports

export default Component.extend({
  // Inputs
  flower: null,
  index: 0,

  tagName: 'li',
  classNameBindings: ['flowerClass'],

  flowerClass: computed('index', function() {
    return 'flower-' + get(this, 'index');
  })
});

可能吗？或者正确的方法是什么？特别是我需要根据索引值添加不同的css类。（供参考）

---

有几种方法可以做到这一点。我更愿意创建一个自定义组件，其使用方式如下：

{{#each model as |flower index|}}
    <li class="(action 'setting()')">{{flower}}</li> //trying to call
{{/each}}

{{#each model as |flower index|}}
  {{flower-item flower=flower index=index}}
{{/each}}

// Imports

export default Component.extend({
  // Inputs
  flower: null,
  index: 0,

  tagName: 'li',
  classNameBindings: ['flowerClass'],

  flowerClass: computed('index', function() {
    return 'flower-' + get(this, 'index');
  })
});

您的自定义组件可能如下所示：

{{#each model as |flower index|}}
    <li class="(action 'setting()')">{{flower}}</li> //trying to call
{{/each}}

{{#each model as |flower index|}}
  {{flower-item flower=flower index=index}}
{{/each}}

// Imports

export default Component.extend({
  // Inputs
  flower: null,
  index: 0,

  tagName: 'li',
  classNameBindings: ['flowerClass'],

  flowerClass: computed('index', function() {
    return 'flower-' + get(this, 'index');
  })
});

---

请参阅twiddle:

您可以编写helper。它将接受索引参数并返回所需的类。您可以像签出一样使用它。它允许您从模板中调用操作

{{flower}}

将返回

设置（index）

的值。除了我上面的评论之外：你能详细说明一下你的用例是什么吗？我怀疑这是一种思维方式——也许我们可以在一些细节上提供更多帮助。我得到一个错误，即

未捕获错误：编译错误：flower item不是帮助者

——你能更新我的twiddle来重现你的代码吗？