web-dev-qa-db-ja.com

backbone.jsのdelegateEvents

誰かがbackbone.jsのdelegateEventsが何をしているのか説明してくれませんか？ ドキュメント は理解に役立ちませんでした。

私の正確なユースケースは：

私はメインビューXと内部ビューYを持っています。これらはうまく機能しますが、メインビューZに移動してからXに戻ると（再利用ではなく再作成）、Y子要素にアタッチされたイベントが失われます。 delegateEventsはこれを解決しますが、その理由を理解したいと思います。

backbone.jsbackbone-events
28
Yaron Naveh

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

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

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

  1. 新しい destroy メソッドを使用してすべてのモデル/コントローラーイベントのバインドを解除するなど、ビュー要素を完全に破棄し（現在はgithubにのみあり、Backboneの次のリリースで追加される予定です）、新しいビューを作成します戻る（キャッシュと再レンダリングだけではなく）-私が好む方法

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

  3. すべてのレンダーで.delegateEvents()を呼び出します-現在何をしているか

お役に立てれば。

37
tgriesser

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」は「click」などの任意のDOMイベントです。 「selector」は、DOM要素がイベントをバインドするためにビューのelに対して実行される任意の有効なjQueryセレクターです。 「callback」は、そのDOM要素のイベントが発生したときに呼び出す、このビューのメソッドの名前です。

それが役に立てば幸い

11
Derick Bailey