4

編集:ボタン以外がクリックされたときにドロップダウンを閉じる方法を探しています: http://jsfiddle.net/brennan/s4JTn/

Ember アプリで Twitter のドロップダウン メニューを (再) 作成しようとしています。ドロップダウン以外がクリックされたときにドロップダウンを閉じようとすると、特に問題が発生します。すなわち。アプリの本文がクリックされたときにドロップダウンを閉じるために、アプリにイベント リスナーを追加する方法を探しています。

これが私の（子供の）見解です。

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 要素にイベントリスナーを作成することで機能する、あなたとほぼ同じセットアップがあります。

唯一の違いは、ドロップダウン トグルに e.stopPropagation() 呼び出しがあることです。

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

その行がないと、ドロップダウンをクリックすると本文に伝播してすぐに閉じるため、ドロップダウンを開いたままにすることができませんでした。

私のセットアップでは、ビューをクリックすると本体に伝播し (したがって上記のコード)、他のビューをクリックすると本体のイベント リスナーがトリガーされます。

私の推測では、他のビューに体への伝播を停止するコードがいくつかありますか?

例としてhttp://jsfiddle.net/bjaeP/を試してください。

于 2012-05-15T04:16:55.727 に答える
0

私はあなたのフィドルを修正しました: http://jsfiddle.net/tV8X6/

これは私にとってはうまくいきます。「dropdownToggle」のアクションヘルパーを削除し、データ属性をタグに追加し、「categorySelect」ビューに「dropdown」クラスを追加しました

于 2012-08-01T07:04:29.907 に答える