Pass a reference of the clicked DOM element to the action handler in Ember

Question

I have a set of buttons whose state I wish to toggle with a class active. If I had a single button, then I would bind the active class to a controller property and toggle that property in the click handler:

<button {{action 'toggle'}} class="{{active}}">model.title</button>

actions: {
  toggle: function() {
    this.set('active', true);
  }
}

But I have multiple buttons, so I am not sure what I can bind. It would be useful if I could pass a reference to the clicked button to the action handler, but I'm not sure how to do this.

{{#each item in model}}
  <button {{action 'toggle' referenceToButton}}>model.title</button>
{{/each}}

actions: {
  toggle: function(buttonReference) {
    // add `active` class to buttonReference
  }
}

What is the best way to accomplish this?

Answer 1

Even though the poster got the answer he wanted, I thought I'd post an answer to what I believe was the intention of the original question:

How to get a reference the clicked DOM element from an action? since I came here looking for an answer to that question and didn't find it.

I can't find a way to get the actual element, but you can get the root view element (which wraps the elements defined in the template) via this:

template:

<button {{action 'toggle' this}}>model.title</button>

controller, view, component:

actions: {
  toggle: function(event) {
    // Get element (as in the return value of document.getElementById(id))
    var viewElements = event.element;
    var elementsInTemplate = viewElements.children;
    var button = viewElements.getElementsByTagName('button');
    //also can use getElementsByClassName, use jQuery etc.
  }
}