How can we get the original event in ember's action

问题

I'm updating a personal project where I used the ember.js version 0.9.x.

So a new version was released and I have a problem related with ember action.

I have the following html code:

<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li>

where, when I click its call this function activateView:

activateView: function(event, context) {
   console.log(event);              
}

but the event and the context are undefined. I've already tried this.context and it returns undefined.

The main idea its obtain the id of the link when the user click.

I know about routes and the handlebar helper link to, but I really need that id for other things,

回答1:

The event is not passed using the action helper. If you really want the event object, you need to define a view and use the click event:

App.MyLink = Em.View.extend({
  click: function(e) {
  }
});

and then:

<li>{{view App.MyLink}}</li>

but requiring access to the dom event is a rare case, because you can pass arguments to {{action}}. In your case:

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

and in the event:

activateView: function(id) {
  console.log(id);              
}

回答2:

In Ember 2...

Inside your action you always have access to the Javascript event object which has the DOM element e.g.

actions: {
    myAction() {
        console.log(event.target) // prints the DOM node reference
    }
}

回答3:

There are two ways you can receive event object in actions,

1.If you are using component, then you can define any of this list of event names in component and that is designed to receive native event object. eg., {{my-button model=model}}

export default Ember.Component.extend({
 click(event){
  //oncliking on this componen will trigger this function
  return true; //to bubble this event up
 }
})

2.If you are using html tag like button then you need to assign a (closure) action to an inline event handler.

{{#each item as |model|}}
      <button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}

In actions hash toggle function will always receive native browser event object as the last argument.

actions:{
 toggle(model,event){

 }
}

In the below format, action toggle will not receive event object,

<button {{action 'toggle'}}>{{model.title}}</button>
Input helpers such as {{input key-press="toggle" and {{text-area key-press="toggle"

Explained really well in ember guide https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

回答4:

you need to pass the id into your function like so to have it accessible in the view, you can pass along what ever you want, but in your example this should do it

html

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

then you have access to the id or what ever you passed in, in the view

...
activateView: function(data){
  console.log(data); // should be the ID "startApp"
}
...

回答5:

Just use event handler directly.

Reference: https://github.com/emberjs/ember.js/issues/1684

来源：https://stackoverflow.com/questions/16499742/how-can-we-get-the-original-event-in-embers-action

标签

ember.js