我们怎样才能在ember的行动中获得原始事件

Question

我正在更新个人项目，我使用的是ember.js版本0.9.x。

所以发布了一个新版本，我遇到了与ember操作相关的问题。

我有以下HTML代码：

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

其中，当我点击它的调用时，这个函数activateView：

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

但事件和上下文未定义。我已经尝试过this.context并返回undefined。

主要想法是在用户点击时获取链接的ID。

我知道路线和车把手帮助链接，但我真的需要那个ID用于其他事情，

Answer 1

在Ember 2 ......

在您的操作中，您始终可以访问具有DOM元素的Javascript event对象，例如

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

Answer 2

使用动作帮助程序不传递事件。如果您确实需要事件对象，则需要定义视图并使用click事件：

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

然后：

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

但是需要访问dom事件是一种罕见的情况，因为您可以将参数传递给{{action}}。在你的情况下：

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

并且在事件中：

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

Answer 3

你需要将id传递给你的函数，以便在视图中访问它，你可以传递你想要的东西，但在你的例子中这应该这样做

<强> HTML

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

然后您可以在视图

中访问id或传入的内容

<强> JS

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

Answer 4

有两种方法可以在动作中接收event个对象，

1.如果您正在使用组件，则可以在组件中定义此事件名称列表中的任何一个，并且该列表旨在接收本机事件对象。例如，{{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.如果您使用html标签之类的按钮，那么您需要为内联事件处理程序分配一个（闭包）动作。

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

在操作中，hash toggle函数将始终接收本机浏览器事件对象作为最后一个参数。

actions:{
 toggle(model,event){

 }
}

在下面的格式中，操作切换不会收到event对象，

• <button {{action 'toggle'}}>{{model.title}}</button>
• 输入辅助工具，例如{{input key-press="toggle"和{{text-area key-press="toggle"

在ember指南https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

中解释得非常好

Answer 5

直接使用事件处理程序。

参考：https://github.com/emberjs/ember.js/issues/1684

Answer 6

我没有足够的声誉发表评论，但这里是 the relevant documentation 使用 Ember Octane。

The callback function will receive the event as its first argument:

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ExampleComponent extends Component {
  @action
  handleClick(event) {
    event.preventDefault();
  }
}