1

次のネストされたビュー構造を取得しました。

LayoutView
  - SidebarView
    - ContactListView
      - ContactItemView
  - ContentView

次の状況を想像してみてください。

ユーザーがContactItemをクリックします。これで、ContactItemは、ContentViewでクリックされた連絡先のプロファイルをレンダリングするイベントまたはその他の何かを呼び出す必要があります。

柔軟性を壊さずにこれを行う方法がわかりません...

4

3 に答える 3

2

ContactItemViewでContentViewを直接呼び出すのではなく、イベントを使用してイベントをフックすることをお勧めします。ビューを作成しているときに、各親ビューを子ビューのイベントにバインドできます。次に、クリックが発生すると、適切なビューがそれを処理するまで、チェーンを介してバブルします。

一般的な考え方を示す簡単な例を次に示します。これは、イベントのバブリングが発生する順序で示しています。これは、少し明確になることを願っています。

まず、ContactItemViewはDOMクリックイベントを取得し、そのバックボーンイベントをトリガーします。

//ContactItemView.js
events : {
   "click .contactName" : "click"
},

click : function(evt){
   this.trigger("clicked", this);
}

ContactListViewはそれをリッスンし、再公開できます。

//ContactListView.js    
render : function(){
 var itemView = new ContactItemView();
 itemView.on("clicked", this.itemClicked, this);
},

itemClicked : function(item){
  this.trigger("clicked", item);
}

SidebarViewはそのイベントをリッスンし、実際にそれをどう処理するかを知っています。

//SidebarView.js    
render: function(){
  var listView = new ContactListView();
  this.contentView = new ContentView();
  listView.on(clicked, this.contactItemClicked, this);
},

contactItemClicked : function(contactItem){
   this.contentView.showMeAContact(contactItem.model); //or whatever
}

このように、ContactItemViewは親ビューについて何も認識しないため、より柔軟になります。欠点は、ボイラープレートコードがたくさんあることです。たぶん他の誰かがよりクリーンなアプローチをとるでしょうが、これは私にとってはトリックです。

于 2012-07-27T18:51:51.137 に答える
2

1つのアプローチは、ビューが特定のイベントをサブスクライブできるようにするイベントアグリゲーターを使用することです。これにより、ビューを相互に切り離すことができます。ビューはお互いを知る必要はなく、特定のイベントを追跡する必要があります。これを行う方法に関する優れたチュートリアルについては、このトピックに関するDerickBaileyの優れた投稿を参照してください。

于 2012-07-27T20:06:35.547 に答える
0

Backbone.Courierをチェックしてください。これは、まさにあなたが説明する「イベントバブリング」シナリオ用に構築された軽量のバックボーンプラグインであり、トリガーチェーンやグローバルイベントアグリゲーターを必要とせずに、子ビューが親や祖父母などと簡単に通信できるようにします。

于 2013-02-04T06:54:39.400 に答える