Javascript 在ember中的控制器中绑定多个操作

我为一个网站设计了一个模型，它有一个侧边栏，菜单出现在mouseEnter上，消失在mouseLeave上。这是用jQuery模拟的，不过现在我试图用Ember重新创建这个功能。到目前为止，我已经正确地使用了mouseEnter，但我不知道如何也绑定mouseLeave

从我到目前为止所读到的内容来看，实现视图似乎是答案，因为视图已被弃用，我不确定如何实现

以下是我目前掌握的情况：

/app/controllers/sidebar.js

import Ember from 'ember';

export default Ember.Controller.extend({
  title: 'Ticket Log',
  menu_showing: false,
  actions: {
    toggleMenu: function () {
      this.set('menu_showing', !this.get('menu_showing'));
      console.log(this.get('menu_showing'));
    }
  }
});

/app/templates/sidebar.hbs

<div {{action "toggleMenu" on="mouseEnter"}} id="sidebar" class="panel panel-default">
  {{#if menu_showing}}
    <div id="sidebar-menu">
      <div id="sidebar-menu-buttons">
        <button id="sidebar-menu-toggle" type="button" class="btn btn-default glyphicon glyphicon-menu-hamburger"></button>
        <button id="sidebar-menu-lock" type="button" class="btn btn-default glyphicon glyphicon-lock"></button>
      </div>
      <div id="sidebar-menu-pills" class="panel panel-default">
        <div class="panel-body">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Ticket Log</a></li>
            <li><a href="#">Customer Info</a></li>
            <li><a href="#">Asset Info</a></li>
          </ul>
        </div>
      </div>
    </div>
  {{/if}}
  {{title}}
  {{outlet}}
</div>

{{{如果菜单显示}





{{/if}
{{title}}
{{outlet}}

你几乎是对的<代码>视图已弃用，但

组件

未弃用，它们是从

视图

扩展而来的

Ember.Component.extend({
  isMenuShowing: false,

  mouseLeave() {
    this.toggleProperty('isMenuShowing');
  },

  mouseEnter() {
    this.toggleProperty('isMenuShowing');
  },
});

---

你几乎是对的<代码>视图已弃用，但

组件

未弃用，它们是从

视图

扩展而来的

Ember.Component.extend({
  isMenuShowing: false,

  mouseLeave() {
    this.toggleProperty('isMenuShowing');
  },

  mouseEnter() {
    this.toggleProperty('isMenuShowing');
  },
});