0

I want to access the target element in the called method in onchange. I have the following code:

Template

<select class="form-control" data-abc="1" onchange={{action 'someMethod' value="target.value"}} >
  <option value="">Select</option>
  .
  .
  .
</select>

Component

export default Ember.Component.extend({
    actions: {
      someMethod(value) {
        jQuery(this).data("abc"); // <-- Want to access element here
      }
    }
});

But, this doesn't work.

Ganesh K
  • 3
  • 4

2 Answers2

1

When you use value="target.value", someMethod will receive only the value alone and it will not receive default event object.

onchange={{action 'someMethod'}}

your component code would be,

export default Ember.Component.extend({
    actions: {
      someMethod(event) {
        //its event object, you can access event.target to get element or event.target.value to get the value.
      }
    }
})
Ember Freak
  • 12,918
  • 4
  • 24
  • 54
0

I got the answer:

<select class="form-control" data-abc="1" onchange={{action 'someMethod' value="target"}} >
  <option value="">Select</option>
  .
  .
  .
</select>

As can be seen in above code, we can pass the target instead of target.value. Then wrap target in jQuery to access desired data attribute.

Ganesh K
  • 3
  • 4
  • If we mentioned, `value` parameter then what it will do, it will get this property from the first argument passed to that method, in our case, it's `event`, so it will destructure `target` property from `event` object. – Ember Freak Jun 20 '17 at 11:33
  • You will like this article http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/ in this `Extracting values out of the first argument` part it's very well explained – Ember Freak Jun 20 '17 at 11:35
  • @kumkanillam Thank you for the article. I upvoted. Can you please answer this question https://stackoverflow.com/questions/44651831/access-array-element-in-ember-template – Ganesh K Jun 20 '17 at 11:37