Mehrere Aktionen in Controller in Ember binden

Question

Ich entwarf ein Mock-up für eine Website, die eine Sidebar mit einem Menü hat, das auf MouseEnter angezeigt wird und auf MouseLeave verschwindet. Dies wurde mit jQuery gespottet, obwohl ich jetzt versuche, diese Funktionalität mit Ember neu zu erstellen. Ich habe das bisher mit MausEingabe richtig gemacht, aber ich kann nicht herausfinden, wie man auch MausLeave bindet.

Von dem, was ich bisher gelesen habe, scheint die Implementierung eines Views die Antwort zu sein, da Views veraltet sind. Ich bin mir nicht sicher, wie ich das anstellen soll.

Hier ist, was ich bisher:

/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

Sie sind fast richtig. Views sind veraltet, aber Components sind nicht und sie sind von View erweitert.

Ember.Component.extend({ 
    isMenuShowing: false, 

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

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