web-dev-qa-db-ja.com

Backbone.js：ビュー間の通信

サンプルアプリのTodos（ http://documentcloud.github.com/backbone/examples/todos/index.html ）のように、エントリのリストを含むBackboneアプリに取り組んでいます。

したがって、私はアプリビューとリストアイテムごとに1つのビューを持っています。ここで、グローバル編集ボタンがあるとします。アプリビューはクリックを処理するので、各リストビューに削除ボタンを表示するように指示します。

以下のスクリーンショット（Spotify）で、[編集]ボタンを押すと、すべてのリストビューの外観が変化します。

バックボーンでこれを行うための最良の方法は何ですか。すべてのリストビューを反復処理し、editMode関数を呼び出す必要があります。しかし、（すぐに使える）アプリビューはリストビューを認識しません。

enter image description here

viewsbackbone.js
32
Sebastian

私はしばらくの間、ビューを調整するためのいくつかの異なるオプションについて記事を書きました： http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator- coordinating-views-in-backbone-js /

あなたの場合、その記事で説明しているイベントアグリゲーターを使用することをお勧めします。各アイテムビューに「editmode」イベントまたは同様のイベントをリッスンさせることができます。このイベントが発生すると、それをリッスンした各ビューが更新されて編集モードになります。次に、「完了」をクリックすると反対のことが行われます。「ビューモード」イベントなどを送信し、各ビュー自体を適切に更新します。

41
Derick Bailey

私の2セント：backbone.jsを使用して、ビュー間で通信できるpub/subを実際に作成できる単純な「ハック」があります。

これらの線に沿った何か（テストされていません）：

var EventBus = Backbone.Model.extend({

   publish: function(event, args){

       this.trigger(event, args);

   },

   subscribe: function(event, args) {

       this.bind(event, args);

   }
});

あなたは基本的にアイデアを得ます。すべてのビューで、このEventBusに「バインド」します（ビューはバックボーンのモデル/コレクションにのみバインドできるため）-基本的に、パブリッシュ/サブスクライブするメソッド名を使用して、そのようなモデルの命名法と同期しますが、しないことを選択できます。その場合は、空のEventBus 'class'を作成し、すべてのビューをそれにバインドするだけです:)

したがって、すべてのビューは、このEventBusに結合され、受信したイベントに基づいて動作する必要があるだけです！ Backbone.jsはこのデザインパターンのすべての配管を内部的に処理するので、ほとんど無料で入手できます:)

上記のコードは、そのままでは実行されない可能性がありますが、それを理解するためにあります...

2
PhD