Backbone.js - 私のdelegateEventsセレクタが動作しないのはなぜですか？

Question

同じタイプのネストされたビューを含むビューがあります。このため、私のdelegateEventsセレクターは、子ビューの要素ではなく最上位の要素のみを選択するように注意する必要があります。

var $link = this.$('> .node > .indent > a'); // success! 

delegateEventsオブジェクトは、同じセレクタを使用して、すべてでイベントをフックアップしません：

私のビューのコンテキスト内で使用される次のコードは、正常に私が結合したい要素を選択します。

events: { 
    'click > .node > .indent > a': 'toggleGrouped' // fail :(
} 

イベント接続が他のよりシンプルなセレクタでも機能することを確認しましたので、レンダリングに問題はありません。

私は間違っていますか？

Answer 1

それはおそらく> .node > .indent > aセレクタを好きではないjQueryのdelegateイベントに関係しています。

これは、ビューのrenderメソッドで次のコード行を追加することで確認できます。それはまだ問題がdelegateイベントではなく、バックボーンに関係している、その後動作しない場合

$(this.el).delegate('> .node > .indent > a', 'click', this.toggleGrouped); 

（これはdelegateEventsでやっていることバックボーンです）。

解決方法は、すべてのレンダリングがレンダリングメソッドで完了した後でclickイベントにバインドすることです。

this.$('> .node > .indent > a').click(this.toggleGrouped); 

また、それはもはや自動的にバインドされていますので、initializeメソッドでtoggleGroupedのコンテキストをバインドしないする必要があります。

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

Answer 2

答えを見つけました。 delegateEventsは、何らかの理由で子どものディセンダで始まるセレクタを受け入れないjQuery.delegate()を、使用しています。

http://api.jquery.com/delegate/#comment-66006048

Answer 3

これを行うための別の方法として、私はちょうど子供セレクタにeventsハッシュのうち>を取り、イベントハンドラにそうようevent.stopPropagation()を使用するかもしれないと思う：

toggleGrouped: function (evt) { 
    evt.stopPropagation(); 

    // event handling code 
} 

アップ最初の親そのイベントを聴いているチェーンはそれを取得し、イベントを捕らえた可能性のある他の人たちにバブリングするのを防ぎます。