4

编辑：寻找一种在单击按钮以外的任何内容时关闭下拉列表的方法：http: //jsfiddle.net/brennan/s4JTn/

我正在寻找（重新）在我的 ember 应用程序中创建 twitter 的下拉菜单。当单击下拉列表以外的任何内容时，我在尝试关闭下拉列表时特别遇到问题。IE。我正在寻找一种方法来向我的应用程序添加一个事件侦听器，以在单击应用程序主体时关闭我的下拉列表。

这是我的（孩子）观点。

categorySelect: Ember.View.extend({
    isOpen: false,
    selected: /* removed for brevity */,
    content:[
        /* removed for brevity */
        /* follows structure: {slug: 1, title: 'title', isActive: true} */
    ],

    dropdownToggle: function(e){
        var open = this.get('isOpen');
        if(open){
            this.set('isOpen', false);
        }else{
            this.set('isOpen', true);
        }
    },
    select: function(e){
        var selected = e.context;

        this.content.setEach('isActive', false);

        this.set('selected', selected);
        selected.set('isActive', true);

        this.set('isOpen', false);
    }
})

这是我的模板代码...

{{#view categorySelect tagName="div" class="btn-group" classBinding="isOpen:open"}}
                        <a class="btn dropdown-toggle btn-facebook btn-small" {{action "dropdownToggle" on="click"}} href="#">
                            {{selected.title}}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            {{#each content}}
                            <li {{bindAttr class="isActive:active"}}><a href="#" {{action "select" on="click"}}>{{title}}</a></li>
                            {{/each}}
                        </ul>
                    {{/view}}

我尝试将事件侦听器添加到正文中，如下所示，这是行不通的。如果我单击任何 ember 视图，Ember 似乎会停止传播。因此，如果我直接单击正文，它会起作用，但如果我单击任何视图，它就不起作用:(

didInsertElement: function(){
        var self = this;
        $('body').on('click', function(){
            self.set('isOpen', false);
        });
    },

寻求帮助和建议。另外，如果上面的任何代码看起来像废话，请告诉我我正在尽可能多地学习。

4

2 回答 2

3

我的设置与您大致相同，通过使用 didInsertElement 在 body 元素上创建事件侦听器来工作。

唯一的区别是我在 dropdownToggle 中有一个 e.stopPropagation() 调用：

dropdownToggle: function(e){
    // [removed]
    e.stopPropagation();
},

没有那条线，我无法保持下拉菜单打开，因为单击下拉菜单会传播到正文并立即将其关闭。

在我的设置中，点击视图确实会传播到正文（因此上面的代码），点击其他视图确实会触发正文上的事件侦听器。

我的猜测是你的其他视图中有一些代码阻止了对身体的传播？

以 http://jsfiddle.net/bjaeP/为例。

于 2012-05-15T04:16:55.727 回答
0

我修改了你的小提琴：http: //jsfiddle.net/tV8X6/

这对我有用。刚刚删除了 'dropdownToggle' 的动作助手，并为 a 标签添加了数据属性，并为你的 'categorySelect' 视图添加了 'dropdown' 类

于 2012-08-01T07:04:29.907 回答