Backbone.marionnette - リビルドイベントと新しいビューの作成

Question

私はLayoutにいくつかのタブがあります。これらのタブの1つをクリックすると、showページの内容の適切な合成ビューregionになります。異なるタブ間を行き来した後、コンポジット・ビューはネイティブ・バインディングを失い、コレクションのリセットとモデルの変更をレンダリングすることに気付きました。

ビューをもう一度表示するときにコンポジットビューの_initialEventsで使用されているイベントを再バインドする方法がありますか、またはすべてshowタブを使用して新しいコンポジットビューを作成する必要がありますか？

現在のところ、私のすべてのビューはので作成してから、タブをクリックするとビューにshowを使用しています。

initialize: function(){ 
    _.bindAll(this); 

    //  Tabs 
    this.places_page = new Places_Layout(); 
}, 

show_places_page: function(){ 

    this.content.show(this.places_page); 
    this.places_page.delegateEvents(); 
}, 

Answer 1

これは私にとって最良のアプローチのようには聞こえません。

定義したような機能を必要としないビューを表示するには、レイアウトのリージョンマネージャを使用する必要があります。

私は

var view = new CustomView(); 
layout.content.show(view);` 

その後に、このアプローチのために行くだろう：あなたは上にある道を続けたい場合は

var newView = new SecondCustomView(); 
layout.content.show(newView); 

、あなたはおそらくこの方法を使用するのがベストだろう：

initialize: function() { 
    _.bindAll(this); 
}, 
show_places_page: function() { 
    var placesLayout = new Places_Layout(); 
    this.content.show(placesLayout); 
} 

意味がありますか？

これ以上の構造を見ることなく、最高の行動を示唆するのは難しいです。

initializeにビューを作成する理由はありますか？

Answer 2

Marionette（v.1）onwordsは、Backbone.BabySitterを使用して子ビューを管理します。

同じ場合も同じです。 すべてのタブビューを格納するコンテナを作成するだけです。後で表示する必要があるビューを返すようにコンテナを照会します。

this.tabViewsContainer = new Backbone.ChildViewContainer(); 
this.tabViewContainer.add(new CustomView(),'tab1'); 
this.tabViewContainer.add(new SecondCustomView(),'tab2'); 

あなたのレイアウトビューが正常にコンテナ内のすべてのビューを閉じ後半だけでcloseメソッドでは、この

var custv = container.findByCustom("tab1"); 
this.content.show(custv); 

を行うビューを表示するには

this.tabViewsContainer.each(function(view){view.close()}); 

Answer 3

あなたはレイアウトを作成する必要はありませドン/タブからタブに切り替えるたびにアイテム/コンポジット/コレクションのビューを表示することができます。逆に、やり方だけでコンテンツを保存することができます。問題は、変数が再宣言されていることです。eコンテンツをレンダリングする時間 解決策は、その変数（this.places_page）がビューに追加されていない場合に宣言されているかどうかを確認する必要があることです。何度も呼び出しても同じレイアウトビューを保持していても問題ありません。メインビュー（リージョンを保持するビュー）をレンダリングすると、（リージョン内の）ネストされた子ビューは、新しいビューがなくなるまで失われます。

initialize: function(){ 
    _.bindAll(this); 

    // You can asign a diferent variable for each view so when you call show_places_page it will render with the same view. 

    if (!this.places_page){ 
     this.places_page = new Places_Layout(); 
    } 

    // other tab   
    if (!this.other_page){ 
     this.other_page = new OtherPage_Layout(); 
    } 

}, 

show_places_page: function(){ 

    this.content.show(this.places_page); 
    this.places_page.delegateEvents(); 
}, 

Answer 4

初期化の中にすべてのビューを作成しないでください。これにより、メモリリークが発生するため、ビューを動的に作成する必要があります。また、コードの再利用性を高めるために、コンテンツ領域にビューを表示するための共通の機能を作成することをお勧めします。私はあなたの次のソリューションのようなものをお勧めします：

//define the regions of your layout view 
regions: { 
    content: '#content' 
}, 
//Maintain a config for the tab content view classes. 
contentViews: { 
    tab1: Tab1View, 
    tab2: Tab2View, 
    tab3: Tab3View 
}, 
//keeps all the view instances 
viewInstances: {}, 
/* 
* show tab function is called when you click a tab item. 
* Consider each tab has a attribute for tab name. 
* For example HTML of your one tab is like: 
* <div data-tab-name="tab_name">Tab <tab_name></div> 
*/ 
showTab: function (e) { 
    var tabName = $(e.currentTarget).attr("data-tab-name"); 
    /* 
    * code for showing selected tab goes here... 
    */ 

    //check and create the instance for the content view 
    if (!this.viewInstances[tabName]) { 
     this.viewInstances[tabName] = new this.contentViews[tabName](); 
    } 
    //Then here you are actually showing the content view 
    this.content.show(this.viewInstances[tabName]); 
    this.viewInstances[tabName].delegateEvents(); //this is to rebind events to the view. 
}