我们怎样才能在安博的行动中得到最初的事件

fcipmucu  于 2022-11-05  发布在  其他
关注(0)|答案(6)|浏览(205)

我正在更新一个个人项目,其中我使用了ember.js版本0.9.x。
所以发布了一个新版本,我有一个与ember行动有关的问题。
下面的代码是:

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

在这里,当我单击它调用函数activateView时:

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

但是事件和上下文是未定义的。我已经试过了。context,它返回undefined。
其主要思想是当用户点击链接时获取链接的id。
我知道路线和车把助手链接到,但我真的需要那个id做其他事情,

avwztpqn

avwztpqn1#

在灰烬2中...
在您的操作中,您始终可以访问Javascript event对象,该对象具有DOM元素,例如

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

wvyml7n52#

该事件不是使用操作帮助器传递的。如果您确实需要该事件对象,则需要定义一个视图并使用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);              
}
mwngjboj

mwngjboj3#

有两种方法可以在动作中接收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标签,比如button,那么你需要为一个内联事件处理器分配一个(关闭)动作。

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

在操作中,哈希切换函数将始终接收本机浏览器事件对象作为最后一个参数。

actions:{
 toggle(model,event){

 }
}

在下面的格式中,action toggle不会接收event对象,

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • 输入辅助对象,如{{input key-press="toggle"{{text-area key-press="toggle"

在ember指南www.example.com中解释得非常好https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

63lcw9qa

63lcw9qa4#

你需要像这样把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"
}
...
s8vozzvw

s8vozzvw6#

我没有足够的声誉发表评论,但这里是使用ember辛烷的相关文档。
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();
  }
}

相关问题