2

我对 Ember.js 很陌生，我正在尝试实现我认为是“浮动”菜单的一个非常基本的行为（即菜单、面板或模式，它绝对位于页面的其余部分之上）当用户单击菜单时菜单关闭的位置。

当用户单击一个按钮时，我会打开一个“浮动”菜单（只是一个包含一些内容的 div）。当用户单击菜单（即单击页面上不在菜单内的任何位置）时，我希望菜单关闭。

我不知道如何让这种行为起作用，甚至不知道我应该采取什么方法来实现它。

我已经设置了一个简单的应用程序，当您单击按钮时会打开一个菜单。小提琴几乎模仿了我目前的设置。我用于应用程序控制器、菜单控制器和菜单视图的 javascript 也粘贴在下面。我如何修改这个小提琴，以便在用户单击它时关闭菜单？

http://jsfiddle.net/LjEEP/1/

App.ApplicationController = Ember.Controller.extend({
    menuIsHidden: true,
    actions: {
        openMenu: function(){
            this.toggleProperty('menuIsHidden');
        }
    }
});

App.MenuController = Ember.Controller.extend({
    needs: ['application']    
});

App.MenuView = Ember.View.extend({
    templateName: 'menu',
    classNames: ['menu'],
    classNameBindings: ['controller.menuIsHidden:hide'],
});

谢谢！

4

1 回答 1

4

基本上，您希望为将隐藏菜单的整个文档注册一个单击处理程序，然后在菜单 div 上设置另一个单击处理程序，以防止单击传播到另一个处理程序。像这样的东西：

   openMenu: function(){
        this.toggleProperty('menuIsHidden');        
        if( !this.get('menuIsHidden') ){
            Ember.run.next(this,function(){
                var _this = this;
                $(document).one('click',function() {            
                    _this.toggleProperty('menuIsHidden');
                });
                $(".menu").click(function(e) {
                    e.stopPropagation(); // This is the preferred method.
                    return false;        
                });
            });
        }
    }

这是一个修改过的小提琴：http: //jsfiddle.net/ncSEG/

于 2013-10-13T04:49:55.900 回答