我正在更新一个使用 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 并且它返回未定义。
主要思想是在用户点击时获取链接的id。
我知道路线和车把助手链接到，但我真的需要那个 id 来做其他事情，
在余烬 2...
在您的操作中，您始终可以访问event具有 DOM 元素的 Javascript 对象，例如
actions: {
myAction() {
console.log(event.target) // prints the DOM node reference
}
}
事件未使用操作助手传递。如果你真的想要事件对象，你需要定义一个视图并使用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);
}
有两种方法可以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}}
在操作中，哈希切换函数将始终接收本机浏览器事件对象作为最后一个参数。
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中解释得非常好
您需要将 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"
}
...
我没有足够的评论声誉，但这里是使用 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();
}
}