get action target element in ember

Question

How can I get the target element's object on which a click event was fired. For eg, if I have a template like:

<table>
<tr>
    <th {{action "someAction"}} >Type</th>
</tr>
</table>

and in my controller I have corresponding action defined like:

action:{
    someAction : function(){
        //get the th element object 
    }
}

It seems like event object is not passed, because I had tried

action:{
    someAction : function(event){
        //event is undefined!
    }
}

UPDATE : Thanks Márcio and Jeremy. I've now got a working solution. My template looks like:

<thead>
        {{#view AS.MyView sortBy="value"}}Value{{/view}}
</thead>

My view looks like:

AS.MyView = Ember.View.extend({
attributeBindings: ['sortBy'],
classNames: ['sortable'],
tagName: 'th',
click: function(evt) {
    var target = evt.target, self = this;
    this.get('controller').send('setSort',$(target).attr('sortBy'));

    $(target).parent().find('th').removeClass('desc').removeClass('asc');
    $(target).addClass(self.get('controller.sortAscending')?'asc':'desc');
}
});

Can you explain what you want to do with the element, maybe there is other way to accomplish it. For example, if it's about styling, this can be done using classNameBinding ... — Marcio Junior, Sep 16 '13 at 18:10
You are right, I wanted to set style on the th element based on the click. I wanted to implement sort able table so that when user clicks based on which column and what order, I wanted to change the style. I will give view classNameBinding a try. Thanks. — Deewendra Shrestha, Sep 16 '13 at 19:48

score 2 · Accepted Answer · answered Sep 17 '13 at 02:53

classNameBinding is a great option for this use case.

Just for reference, if you need to deal with low level browser events, you can do that in the View layer.

http://emberjs.com/guides/views/handling-events/

{{#view App.ClickableView}}
This is a clickable area!
{{/view}}

App.ClickableView = Ember.View.extend({
  click: function(evt) {
    alert("ClickableView was clicked!");
  }
});

get action target element in ember

1 Answers1

Linked