使用 {{#event}} 块在 EmberJS 组件中处理事件

Question

我一直在 Ember 中开发 UI，但我在实现文档 here

中描述的一些事件处理时遇到困难

我需要在悬停时突出显示导航栏的一部分。导航栏由 ember-bootstrap components.

组成

    {{#bs-navbar type="dark" backgroundColor="primary" as |navbar|}}
{{navbar.toggle}}
<div class="container-fluid" style="padding-left:50px;padding-right:50px; ">
    <a class="navbar-brand" href="#"><img style="max-width:250px; margin-top: -12px;margin-bottom: -12px" src="/assets/images/logo_white_3x.png"></a>
    {{#navbar.content}}
        {{#navbar.nav as |nav|}}
            {{#nav.item class="highlight-active"}}
                {{#nav.link-to "index"}}LIVE{{/nav.link-to}}
            {{/nav.item}}
        {{/navbar.nav}}
    {{/navbar.content}}
    <div class="navbar-nav mr-left">
        {{#navbar.content}}
            {{#navbar.nav as |nav|}}
                {{#nav.dropdown class="{{isHover}}" as |dd|}}
                    {{#dd.toggle }}Link<span class="caret"></span>{{/dd.toggle}}
                        {{#dd.menu as |ddm|}}
                            {{#ddm.item}}{{#ddm.link-to "index"}}Link{{/ddm.link-to}}{{/ddm.item}}
                            {{#ddm.item}}{{#ddm.link-to "cau.all"}}Link{{/ddm.link-to}}{{/ddm.item}}
                        {{/dd.menu}}
                {{/nav.dropdown}}
                {{#nav.item}}
                    {{#nav.link-to "index"}}Current User: <b>MICKEY MOUSE</b>{{/nav.link-to}}
                {{/nav.item}}
            {{/navbar.nav}}
        {{/navbar.content}}
    </div>
</div>
{{/bs-navbar}}

为了完成这个，我尝试使用文档中描述的块事件之一：

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

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

这会产生以下错误：hover not found, and the catch-all block handler didn't handle it

我想这可能是因为 even 的名字必须用连字符连接所以相应地改变了它。这产生了 no component or helper by that name 错误。

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

任何人都可以解释一下吗？

Answer 1

首先，如果您需要在悬停时突出显示导航栏，您应该使用 css 来实现。

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

至于你一般做的有什么问题，回去再看看那些链接的文档。 ember 没有处理名为 hover 的事件。您要查找的是 mouseEnter 和 mouseLeave。检查此 twiddle 以查看示例：

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

我们只在悬停时显示传递的方块

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

Answer 2

尝试为 mouseEnter 事件使用一个动作，例如<div mouseEnter={{action "showCaution"}}>

Another way to preserve native event behaviors and use an action, is to assign a (closure) action to an inline event handler.

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

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

使用 {{#event}} 块在 EmberJS 组件中处理事件

Event handling in EmberJS components using {{#event}} blocks

ember.js