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

Question

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

我希望在我的 ember 应用程序中(重新)创建 Twitter 的下拉菜单。当单击下拉列表除外 时，我在尝试关闭下拉列表时遇到了一个特别的问题。 IE。我正在寻找一种方法来向我的应用程序添加事件监听器，以便在单击应用程序主体时关闭我的下拉菜单。

这是我( child )的观点。

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 View ，Ember 似乎会停止传播。因此，虽然如果我直接单击正文它会起作用，但如果我单击我的任何 View 它就不起作用:(

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

如果没有该行，我无法让下拉菜单保持打开状态，因为对下拉菜单的点击会传播到正文并立即将其关闭。

在我的设置中，点击 View 确实会传播到主体(因此上面的代码)，并且点击其他 View 确实会触发主体上的事件监听器。

我猜你的其他 View 中是否有一些代码阻止传播到 body ？

尝试 http://jsfiddle.net/bjaeP/举个例子。