[英]Binding multiple actions in controller in ember
我為網站設計了一個樣機,該網站的側邊欄帶有一個菜單,該菜單出現在mouseEnter上,而在mouseLeave上消失。 這是用jQuery模擬的,盡管現在我正嘗試使用Ember重新創建此功能。 到目前為止,我已經可以正確地使用mouseEnter了,但是我不知道如何綁定mouseLeave。
從到目前為止的內容來看,實現View似乎是答案,因為不贊成使用View,所以我不確定該如何進行。
這是我到目前為止的內容:
/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>
你說的差不多。 Views
已棄用,但Components
未使用,並且它們已從View
擴展。
Ember.Component.extend({
isMenuShowing: false,
mouseLeave() {
this.toggleProperty('isMenuShowing');
},
mouseEnter() {
this.toggleProperty('isMenuShowing');
},
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.