Ember.js 使用{{Event}}块在EmberJS组件中处理事件

我一直在Ember中开发UI，我很难实现文档中描述的一些事件处理

我需要在悬停时突出显示导航栏的一部分。导航条由以下部件组成：

为了实现这一点，我尝试使用文档中描述的一个块事件：

 //template
 {{#hover}}
  <h1>link</h1>
 {{/hover}}

//component
export default Component.extend({
  hover() {
    alert('hovered')
  },
  actions: {
      //actions here
  }
});

这将产生以下错误：未找到hover，并且catch-all块处理程序未处理它

我想这可能是因为偶数的名称必须连字符，所以相应地更改了它。这就产生了一个名为“no component”或“helper”的错误

从指南中复制和粘贴相同的文本会产生相同的错误，这表明我不理解更基本的内容

---

有人能解释一下吗？

首先，如果你需要突出显示悬停时的导航栏，你应该使用css

.someClass:hover: {
  //apply highlight style
}

至于你现在做的事情有什么不对劲，回头再看看那些链接的文档。没有余烬处理的称为悬停的事件。你要找的是mouseEnter和mouseLeave。选中此项查看示例：

export default Component.extend({
  mouseEnter(){
    this.set('hovering', true); 
  },
  mouseLeave(){
    this.set('hovering', false);
  }
});

我们只在悬停时显示经过的块

Hover here -> 
{{#if hovering}}
{{yield}}
{{/if}}

---

首先，如果需要突出显示悬停时的导航栏，应该使用css来完成

.someClass:hover: {
  //apply highlight style
}

至于你现在做的事情有什么不对劲，回头再看看那些链接的文档。没有余烬处理的称为悬停的事件。你要找的是mouseEnter和mouseLeave。选中此项查看示例：

export default Component.extend({
  mouseEnter(){
    this.set('hovering', true); 
  },
  mouseLeave(){
    this.set('hovering', false);
  }
});

我们只在悬停时显示经过的块

Hover here -> 
{{#if hovering}}
{{yield}}
{{/if}}

尝试对事件使用操作，例如

保存本机事件行为和使用操作的另一种方法是 将闭包操作分配给内联事件处理程序

操作只是在组件的操作哈希上定义的函数。由于操作被分配给内联处理程序，因此函数定义可以将事件对象定义为其第一个参数

actions: {
  showCaution(event){
    // Only when assigning the action to an inline handler, the event object
    // is passed to the action as the first parameter.
 }
}

尝试对事件使用操作，例如

保存本机事件行为和使用操作的另一种方法是 将闭包操作分配给内联事件处理程序

操作只是在组件的操作哈希上定义的函数。由于操作被分配给内联处理程序，因此函数定义可以将事件对象定义为其第一个参数

actions: {
  showCaution(event){
    // Only when assigning the action to an inline handler, the event object
    // is passed to the action as the first parameter.
 }
}

---

是的，我犯的主要错误是没有意识到{{double clickable}}}是一个屈服的组件。我认为注册“事件”区域是另一种帮助。谢谢你的澄清。这是否意味着如果您想通过事件以这种方式影响父组件，您需要使用闭包操作？是的，我犯的主要错误是没有意识到{double clickable}}是一个屈服组件。我认为注册“事件”区域是另一种帮助。谢谢你的澄清。这是否意味着如果您想通过事件以这种方式影响父组件，您需要使用关闭操作？谢谢您的回复。我已经在应用程序的其他部分使用过这个方法，但我无法将它与上面的示例结合使用，并使用ember bootstrap插件。我想，如果不能扩展ember引导组件，我就无法将action helper添加到现有的{{dd.dropdown}}，谢谢您的回复。我已经在应用程序的其他部分使用过这个方法，但我无法将它与上面的示例结合使用，并使用ember bootstrap插件。我认为，如果不能扩展ember引导组件，我就无法将action helper添加到现有的{{dd.dropdown}}。