Question

I have a simple foreach loop:

{{#each App.userC.companies}}
    <button class="btn btn-inverse btn-huge" {{action setcompany target="App.userC"}}>{{this.name}}</button>
{{/each}}

“companies” element have two elements: name and id

When I click on button I want to know which “this.id” was clicked? How to achieve this? I tried:

setcompany: function(e){
    console.log($(e.target).data(...)); //output: <script id='metamorph-4-start' type='text/x-placeholder'></script>4ff2f79461d69a9811000001<script id='metamorph-4-end' type='text/x-placeholder'></script>
}

But its pretty useless and I bet this is not the way things are done in Ember

Answer 1

The jQuery click event is given a context by Handlebars when it is triggered. By default it is the current view context, but you can pass in whatever you like.

{{#each App.userC.companies}}
  <button class="btn btn-inverse btn-huge" {{action setCompany target="App.userC" context="this"}}>{{this.name}}</button>
{{/each}}

setCompany: function(event){
  var company = event.context
}

You can check out the API here, specifically the ‘Specifying a context’ section.