时间戳

首页 > 解决方案 > EmberJS 组件中使用 {{#event}} 块的事件处理

ember.js - EmberJS 组件中使用 {{#event}} 块的事件处理

问题描述

我一直在使用 Ember 中的用户界面，我很难按照文档here中的描述实现一些事件处理

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

    {{#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错误。

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

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

标签： ember.js

解决方案

尝试对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.
 }
}

推荐阅读