Question

我是Ember.js的新手，我正在努力实现我认为“浮动”菜单的基本行为（即菜单，面板或模态，绝对位于其余部分之上）当用户点击菜单时菜单关闭的页面。

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

我无法弄清楚如何使这种行为发挥作用，甚至我应采取什么方法来实现这一点。

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

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'],
});

谢谢！

Answer 1

基本上你想要为整个文档注册一个隐藏菜单的点击处理程序，然后在菜单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/

Ember.js 1.0.0：隐藏“浮动”菜单当用户点击视图时查看

1 个答案: