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类。（为了想法）

Live Example

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 component

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

1 个答案: