30

backbone.js の delegateEvents が何をするのか、誰か説明してもらえますか? ドキュメントは私が理解するのに役立ちませんでした。

私の正確なユースケースは次のとおりです。

内部ビュー Y を持つメイン ビュー X があります。それらはうまく機能しますが、メイン ビュー Z に移動してから X に戻ると (再作成ではなく再利用)、Y 子要素に関連付けられているイベントが失われます。delegateEvents はこれを解決しますが、その理由を理解したいと思います。

4

2 に答える 2

40

基本的に、これを呼び出すと、要素にバインドされたイベント ハッシュから関連するすべてのイベントだけでなく、DOM から要素を削除する.remove()jQuery remove関数へのプロキシになります。

Backbone の View 要素にはまだ が含まれていますが.el、DOM に再挿入すると、jQuery 要素はバインドされたすべてのリスナーを失いました。

いくつかの解決策があります：

  1. ビュー要素を完全に破棄します。これには、新しいdestroyメソッドを使用してすべてのモデル/コントローラー イベントのバインドを解除することも含まれます (現在は github でのみ、Backbone の次のリリースで追加される予定です)。再レンダリング) - 私の好みの方法

  2. イベントバインディングを失うことなく削除と同じことを明らかに行うjQueryのデタッチを使用するメソッドを作成（または削除を拡張）します-それを行っていませんが、機能するようです

  3. すべてのレンダリングを呼び出す.delegateEvents()- 現在行っていること

お役に立てれば。

于 2012-06-17T19:03:04.583 に答える
13

delegateEvents はevents: { ... }ビュー インスタンスの宣言を受け取り、指定されたイベントを指定された DOM 要素にバインドし、指定されたコールバック メソッドを使用してイベントを処理します。

したがって、レンダリング後の DOM ツリーは次のようになります。

<div> 
  <a href="#" id="foo">foo</a>
</div>

そして、次のように定義されたビュー:


Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

「foo」リンクのクリックを適切に処理するため、コード内のクリックに応答できます。

events宣言の内訳は次のとおりです"eventname selector": "callback"。「eventname」は、「クリック」などの任意の DOM イベントです。「selector」はel、イベントをバインドする DOM 要素のビューに対して実行される任意の有効な jQuery セレクターです。「callback」は、その DOM 要素のイベントが発生したときに呼び出す、このビューのメソッドの名前です。

それが役立つことを願っています

于 2012-06-17T18:54:36.647 に答える