CODEWITHSUNDEEP
ember.js
Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

get action target element in ember

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');
}
});

Upvotes: 3

Views: 4022

Answers (1)

Jeremy Green
Jeremy Green

Reputation: 8574

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!");
  }
});

Upvotes: 2

Related Questions