66

次の 2 行のコードの長所と短所は何ですか? 同じことをするのに2つの異なる方法がある理由がわかりません。 

this.listenTo(app.Todos, 'change:completed', this.filterOne);
app.Todos.on('change:completed', this.filterOne);

また、.on を使用する場合、デフォルトのコンテキストを確認するにはどうすればよいですか?

4

2 に答える 2

120

listenToこれらのリスナーは自動的に削除されるためstopListening、ビューが削除されたときに が呼び出されます ( 経由remove())。以前listenToは、ファントム ビューが永遠にぶらぶらする (メモリ リークや誤動作の原因となる) という非常に陰湿な問題がありました。これは、ビュー インスタンス自体がなくなって DOM に存在しなくなったにもかかわらず、ビュー メソッドがモデルのイベント リスナーとして参照されていたためです。

のバックストーリーを読みたい場合はlistenTo、バックボーンの github リポジトリを検索してlistenTo、より長い問題の議論を読んでください。

デフォルトのコンテキストに関しては、いくつかのものがバインドされる可能性がありますthis:

  • を介してバインディングを行う場合this.listenTo、それは常にビュー インスタンスになります (コメントで Wim Leers が指摘)
  • ないthis.listenToと話がややこしくなる
    • その他のイベントの場合、グローバル オブジェクトになります (これを避けるのが最善です)。
    • DOM イベントの場合、通常の DOM イベント バインディングと同様にソース要素になります。
    • 明示的なコンテキスト ( の 3 番目の引数foo.on) を指定すると、バックボーンはそれを使用します (したがって、これはより堅牢なアプローチです)。
    • ECMA 標準を使用する場合はfunction () {//your event handler}.bind(this)、コンテキストを手動で制御することもできます (こちらも推奨)
    • @muが指摘したように、_.bindまたは$.proxyECMAの代替品が利用可能ですfunction.bind
    • バックボーン ビューの場合、これを行うと、ビュー メソッドがイベント ハンドラーとして使用されるときにthis.bindAll('onClick', ...)、ビュー インスタンスがコンテキストになります。this
  • ビューの標準eventsプロパティを使用して接続されたすべてのイベントは、バックボーンによってビュー インスタンスに自動的にバインドされます (これは を使用したベルトとサスペンダーですbindAll) 。

したがって、いくつかのガイドラインに要約すると、次のようになります。

  • events簡潔で正しいため、可能な限りプロパティを使用してください
  • this.listenToモデルとコレクションへのすべてのバインディングに使用
  • 追加のバインディングは、好みの方法を使用してコンテキストを確実にバインドすることを忘れないでください。標準なので、私は通常 ECMA を使用しFunction.bindますが、ここにはいくつかの優れたオプションがあります。
于 2013-05-29T21:24:18.330 に答える