Using An Ember Component in a list

Question

I am using an Ember Component(Eg: a button) in an array:

{{#each employees as |employee|}}
   {{employee.first_name}}
   {{component "button" action='promoteEmployee' emp_id=employee.id}}
{{/each}}

And, in component action on button is pressButton(eg):

pressButton: function(){
  this.sendAction('action', this.get('emp_id'));
}

But, when the list of employee gets rendered(eg):

Alice |Promote| Mark |Promote| Tesla |Promote|

And i click on the button to promote an employee(say employee Mark), the emp_id which is bubbled up is of Alice(always of the first employee in the list) (and not Mark), can you let me know where am I going wrong here?

Answer 1

So you need to pass the employee id as a parameter of the action:

Template:

{{#each employees as |employee|}}
    {{employee.first_name}}
    {{button action=(action 'promoteEmployee' employee.id)}}
{{/each}}

Component:

actions: {
  pressButton(empId){
    this.get('action')(empId);
  }
}