gpt4 book ai didi

javascript - 在 ember 中绑定(bind) Controller 中的多个操作

转载 作者:行者123 更新时间:2023-12-02 13:53:50 25 4
gpt4 key购买 nike

我为一个网站设计了一个模型,该网站有一个侧边栏,其中的菜单出现在 mouseEnter 上,并在 mouseLeave 上消失。这是用 jQuery 模拟的,尽管现在我正在尝试使用 Ember 重新创建此功能。到目前为止,我已经正确地使用了 mouseEnter,但我不知道如何绑定(bind) 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');
},
});

关于javascript - 在 ember 中绑定(bind) Controller 中的多个操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40814250/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com