CODEWITHSUNDEEP
ember.js
3gwebtrain
3gwebtrain

Reputation: 15293

How to call a action from each loop while create a new element?

I require to add a class name according to the index. as well I do have much other conditional events to add with each of the element. for that reason I would like to add a call back on element create.

how can i call a function from each iterator. I tried like this:

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

here is my controller:

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

is it possible? or what is the correct way? especially i require to add different css classes according to the index value. ( for idea )

Live Example

Upvotes: 1

Views: 36

Answers (1)

Timm
Timm

Reputation: 1015

There are several ways to do this. I would prefer to create a custom component which is used like this:

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

Your custom component could look like this:

// Imports

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

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

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

See twiddle: flower-item component

Upvotes: 1

Related Questions