CODEWITHSUNDEEP
ember.js
Watson
Watson

Reputation: 105

How do I get the DOM node of the element with a clicked action

I need to micro-manage the class names on a <span> element which has an action on it. It looks like this:

<span {{action 'sortChars'}} {{bindAttr class="active:active direction:up"}} class="carrot"></span>

But since you cant combine static and dynamic bindAttr attributes, or have the same attribute specified normally and with bindAttr; I need to add and remove the classes myself with jQuery....

All I need is to be able to get the DOM node of the clicked element...

This is my action sortChars function inisde my ArrayController

sortChars: function(){
  target = this.get('target');
}

target doesnt work... i get a bunch of ember stuff

Thanks!

Upvotes: 0

Views: 611

Answers (1)

mavilein
mavilein

Reputation: 11668

You can combine static and dynamic class names with {{bindAttr}}. There is a good explanation in the Ember Docs.

Your Solution (1.0 RC7 and below):

<span {{action 'sortChars'}} {{bindAttr class=":carrot active:active direction:up"}}></span>

Only dynamic:

<img {{bind-attr class="view.someBool:class-name-if-true:class-name-if-false"}}>

Only static:

<img {{bind-attr class=":class-name-to-always-apply"}}>

Static and dynamic:

<img {{bind-attr class=":class-name-to-always-apply view.someBool:class-name-if-true view.someProperty"}}>

Upvotes: 2

Related Questions