backbone.jsとjQueryを使用したイベントバインディングのクリック

メニューを切り替えるには、backbone.js -viewの2つのイベントをバインドする必要があります。考えられるのは、idが#togglerのボタンをクリックするとメニューが表示され、#menu要素の外側にあるクリックがメニューを非表示にするということです。backbone.jsとjQueryを使用したイベントバインディングのクリック

残念ながら、私が#menu要素をクリックしたかどうかにかかわらず、すべてのクリックでoutsideMenuHandler()が呼び出されることなく、バックボーンのイベントバインディングでこれを行うことはできません。

この機能を変更するにはどうすればよいですか？

これは意図したとおりに動作しない、私はBACKBONE.JSでやっていることです：ちょうど参照として

myView = Backbone.View.extend({ 

    events: { 
     'click #menu': 'insideMenuHandler', 
     'click':  'outsideMenuHandler' 
    } 

    insideMenuHandler: function(e) {}, // Called when clicking #menu 
    outsideMenuHandler: function(e) {} // Called on every click both on and off #menu 

}

は、ここで私は一人ではjQueryを使用してどうなるのかです：

$(document).click(function(event) { 
    if ($(event.target).closest('#menu').get(0) == null) { 
     $("#menu").slideUp(); 
    } 
});

出典

2012-01-30 Industrial

ソートする必要があることがいくつかあります。

まず第一に、あなたのinsideMenuHandler戻りfalseたりoutsideMenuHandlerが#menuのクリックに対して呼び出され得ることはありませんその後、e.stopPropogation()を呼び出す場合。たとえば：

http://jsfiddle.net/ambiguous/8GjdS/

しかし、それはあなたの全体の問題ではありません。 outsideMenuHandlerは、あなたのビューのクリックに対してのみ呼び出されます。誰かがあなたのビューの外のページをクリックすると、outsideMenuHandlerは呼び出されず、メニューは表示されません。誰かが#menu以外の場所をクリックしたときにメニューを停止させたい場合は、手動でbodyにバインドして、ビューが破棄されたときに手動でバインドを解除する必要があります。このようなもの：

var myView = Backbone.View.extend({ 
    events: { 
     'click #menu': 'insideMenuHandler' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler'); 
    }, 

    render: function() { 
     // Both <body> and <html> for paranoia. 
     $('body, html').on('click', this.outsideMenuHandler); 
     // ... 
     return this; 
    }, 

    remove: function() { 
     // Clean up after ourselves. 
     $('body, html').off('click', this.outsideMenuHandler); 
     // ... 
    }, 

    // ... 
    outsideMenuHandler: function(e) { 
     // ... 
     return false; 
    } 
});

その後、適切に表示を削除してください。たとえば、次のように

http://jsfiddle.net/ambiguous/MgkWG/1/

出典

2012-01-30 20:36:55

おかげであなたの答えのためにたくさん。とても感謝している！簡単な質問 - 私が理解するように、clickイベントをfalseに戻すと、デフォルトのイベントは発生しません。つまり、outsideMenuHandlerがfalseを返すので、他のすべてのクリックは無効になります。私のロジックを実行した後に（私のメニューを隠して） 'outsideMenuHandler'が' true'を返すようにすれば、私は困っていますか？ – Industrial

@Industrial： 'body、html'バインディングから' outsideMenuHandler'への二重の呼び出しで終わりますが、それは問題ではないかもしれません。おそらく 'outsideMenuHandler'を' html'にバインドするだけで済むかもしれませんが、あなたが気にしているすべてのブラウザで正しく動作することをブラウザがチェックしたいと思うでしょう。 –

-1

問題は、ビューelとして定義したDOM要素にイベントをバインドすることです。したがって、これがあなたのjqueryの例のようにwindow.documentでなければ、それらの外側のクリックを気にすることはできません。あなたの例で最も簡単な方法は、バックボーンではなくjqueryを使って手動でイベントを追加することです。

出典

2012-01-30 20:33:56

backbone.jsとjQueryを使用したイベントバインディングのクリック

答えて

関連する問題