前の記事では、バックボーンのビュー間で価値を渡すことの学習経験を紹介しました。この記事では、バックボーンビュー間に3つのコミュニケーション方法を導入することに焦点を当てています。
MVCフレームワークをマスターする最も重要なセクションは、さまざまなビュー間で通信する方法を習得することです。以前にAngularを使用したとき、イベントベースの通信方法（$ on、$ emit、$ boardcast）またはサービスベースの方法は非常に便利だと思いました。 Backboneに移動した後、Backboneのイベントメカニズムと非常に柔軟な使用の理解が不十分であるため、優れたコミュニケーション方法は見つかりませんでした。この記事を見るまで、著者は簡単な例を使用して、バックボーンビュー間の3つのコミュニケーション方法を明確に説明しました。翻訳は次のとおりです。
私が開発しているWebページには、ドキュメントとサイドバーという2つの主要な部分があります。
上記の写真に示すように、私は3つのビューを設定しました：
ApplicationView-一番外側のビューとして下のビューを含む
documentView-編集または閲覧されているコンテンツが表示されます
SideBarview-ドキュメント関連の情報を表示します
DocumentViewとSideBarviewはApplicationViewのサブビューであるため、全体的なビュー構造を以下の図に示します。
ユーザーは任意のサブビューで動作し、他のサブビューをそれに応じて変更する必要があります。しかし、2人の子供の見解は相手に直接通知することができないため（つまり、すべての子供ビューのスコープを含む親ビューとは異なり、彼らのスコープは直接関係していません）、イベントメカニズムが必要です。
グーグルで検索して他の人の方法を参照した後、次の3つの異なるコミュニケーション方法を要約しました。
1.親ビューを通過するイベントをパスします
私は、親ビュー（ApplicationView）を通じて、2つの子ビューのためにイベントを渡します。親ビューには、すべての子供ビューの範囲が含まれているため、イベント配信の媒体として使用することをお勧めします。
JavaScriptコードは次のとおりです。
var ApplicationView = backbone.view.extend（{initialize：function（）{this.documentView = new DocumentView（{parent：this}）; this.sidebarview = new SideBarview（{parent：this}）; this.documentView.on（ 'edit'、documentited、 Stuffthis.sidebarview.trigger（ 'documentedit'）;}}）; var documentview = backbone.view.extend（{onedit：function（）{this.trigger（ 'edit'）;}）; this）;}、ondocumentedit：function（）{// document edit。}}）;ただし、この方法は効率的ではありません。 ApplicationView documentedited（）に追加のイベントハンドラーを追加する必要があるためです。子ビューで多数のイベントが渡された場合、イベントハンドラー機能は親ビューで継続的にトリガーされ、圧倒されます。
次に、2番目の方法を見てみましょう。
2。Eventbusからのビュー間のコミュニケーション
Backbone.eventsを継承することにより、グローバルオブジェクトEventbusを作成します。各サブビューに注入して、イベントをブロードキャストします。
JavaScriptコードは次のとおりです。
var applicationView = backbone.view.extend（{initialize：function（）{this.eventbus = _.extend（{}、backbone.events）; this.documentView = new DocumentView（{eventbus：this.eventbus}）; this.sidebarview = new sidebarview（{eventbus：eventbus： this.eventbus}）;}、}）; var documentview = backbone.view.extend（{initialize：function（options）{this.eventbus;}、onedit：function（）{this.eventbus.trigger（ 'documentededit'）;} function（options）{this.eventbus = options.eventbus; this.eventbus.on（ 'documentedit'、this.ondocumentedit、this）;}、ondocumentedit：function（）{// document edit。}}）;この方法では、イベントをグローバルオブジェクトとして使用してイベントを登録します。ビューの間でコミュニケーションを取りたい場合は、Eventbusをビューに注入するだけで、簡単にトリガーまたはイベントを聴くことができます。
注：グローバルオブジェクトを作成したくない場合でも、モジュールでEventBusを作成したり、通信のレベルを表示したりできます。
この方法は、最初の方法よりも既に大幅に優れています。ただし、サブビューでEventBusを手動で導入する必要があります。これは、まだ改善の余地があることを示しています。それでは、3番目の方法を見てみましょう。
3.イベント登録マシンとしてバックボーンを直接使用します
2番目の方法では、Backbone.eventsから継承された別のEventBusを作成します。しかし、最近、バックボーンオブジェクト自体がイベントをミックスするオブジェクトであることに気付いたので、バックボーンを直接使用してイベントをブロードキャストするため、別のEventBusを作成する必要はありません。
また、バックボーンオブジェクトは直接呼び出すことができるため、各サブビューに手動で注入する必要はありません。
JavaScriptコードは次のとおりです。
var applicationView = backbone.view.extend（{initialize：function（）{this.documentView = new DocumentView（）; this.sidebarview = new SideBarview（）;}、}）; var documentView = backbone.view.extend（{onedit：function（）{backbone.trigger（ 'var）; backbone.view.extend（{initialize：function（options）{backbone.on（ 'documentedit'、this.ondocumentedit、this）;}、ondocumentedit：function（）{// race edit。}}）;要約します
私はプロジェクトで3番目の方法を使用することになりました。そして、私の意見では、それはグローバルなバックボーンオブジェクトに直接依存していますが、使用することは非常に簡潔です。