Связывание нескольких действий в контроллере в ember

Question

Я разработал макет для сайта с боковой панелью с меню, которое появляется на 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> 

Answer 1

Вы почти правы. Views устарели, но Components нет, и они продлеваются с View.

Ember.Component.extend({ 
    isMenuShowing: false, 

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

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