在创建新元素时，如何从每个循环中调用动作

Question

我需要根据索引添加类名。同样，我确实还有许多其他条件事件要添加到每个元素中。因此，我想在元素上添加回电。

如何调用每个迭代器的函数。我尝试这样的尝试：

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

这是我的控制器：

actions:{
    setting:function(element, index){
        console.log(element, index); // i will add class name by condition
    }
  }

有可能吗？还是正确的方法是什么？特别是我需要根据索引值添加不同的CSS类。(想法(

实时示例

Answer 1

有几种方法可以做到这一点。我希望创建一个自定义组件，该组件使用：

{{#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：Flower-Item组件