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

我认为可能是因为偶数的名称必须带连字符，所以相应地对其进行了更改。这产生了no component or helper by that name错误。

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

有人可以照亮吗？

Answer 1

首先，如果您需要在悬停时突出显示导航栏，则应该使用CSS进行操作。

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

关于您总体上的问题是什么，请返回并再次查看那些链接的文档。余烬不会处理称为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"}}>

保存本地事件行为和使用操作的另一种方法是为内联事件处理程序分配（关闭）操作。

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

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}}块

2 个答案: