Question

修改：想要在点击按钮时关闭下拉列表的方法：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似乎会停止传播。因此，如果我直接点击正文，它会起作用，如果我点击我的任何观点，它就不起作用：（

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

寻求帮助和建议。此外，如果上述代码中的任何一个看起来像垃圾，请告诉我，我希望尽可能多地学习。

Answer 1

我使用大致相同的设置，通过使用didInsertElement在body元素上创建事件监听器。

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

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

如果没有该行，我无法保持下拉列表打开，因为下拉列表上的点击会传播到正文并立即将其关闭。

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

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

尝试http://jsfiddle.net/bjaeP/作为示例。

Answer 2

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

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

在Ember.js中重新创建Bootstrap Dropdown功能

2 个答案: