Backbone.marionnette - Ereignisse im Vergleich zum Erstellen neuer Ansichten neu erstellen

Question

Ich habe eine Layout, die mehrere Registerkarten enthält. Klicken Sie auf eine dieser Registerkarten show die entsprechende zusammengesetzte Ansicht im Inhalt der Seite region. Nachdem ich zwischen verschiedenen Tabs navigiert habe, ist mir aufgefallen, dass die zusammengesetzten Ansichten ihre nativen Bindungen verloren haben, die beim Zurücksetzen der Sammlung und bei Modelländerungen gerendert werden.

Gibt es eine Möglichkeit, die Ereignisse in _initialEvents einer zusammengesetzten Ansicht neu zu binden, wenn eine Ansicht ein zweites Mal angezeigt wird, oder sollte ich eine neue zusammengesetzte Ansicht erstellen alle I show ein Tab?

Derzeit erstellen ich alle meine Ansichten in initialize meiner Layout und dann show mit der Ansicht, wenn ein Tab angeklickt wird.

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

Das klingt nicht wie der beste Ansatz für mich.

Sie sollten die Regionsmanager des Layouts verwenden, um Ansichten anzuzeigen, ohne dass Funktionen wie von Ihnen definiert benötigt werden.

Ich würde für diesen Ansatz

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

dann später:

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

Wenn Sie den Weg weiter zu gehen möchten, dass Sie auf dann würden Sie wahrscheinlich am besten, diesen Ansatz zu verwenden, :

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

Macht das Sinn?

Es ist schwer, die beste Vorgehensweise vorzuschlagen, ohne dabei mehr Struktur zu sehen.

Gibt es einen Grund, dass Sie die Ansichten in initialize erstellen?

Answer 2

Marionette (v.1) onwords verwendet Backbone.BabySitter, um untergeordnete Ansichten zu verwalten.

In Ihrem Fall tun Sie das gleiche. Erstellen Sie einfach einen Container, um alle Registerkarten zu speichern. Fragen Sie später den Container ab, um die Ansicht zurückzugeben, die Sie anzeigen müssen.

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

Um später zu zeigen die Ansicht nur tun, um diese

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

In enger Methode, um Ihre Layoutansicht erfolgreich alle Blick in Behälter schließen

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

Answer 3

Sie haben don keinen Plan erstellen/Wenn Sie von einer Registerkarte zur nächsten wechseln, können Sie den Inhalt in einer Variablen speichern. Das Problem, das Sie haben, ist, dass die Variable neu deklariert wird ach, wann Sie den Inhalt rendern wollen. Die Lösung ist, dass Sie überprüfen müssen, ob diese Variable (this.places_page) deklariert ist, wenn sie nicht an die Ansicht angehängt wird. Wenn Sie sie also mehrmals aufrufen, wird die gleiche Layoutansicht ohne Probleme angezeigt render die Hauptansicht (die die Regionen enthält) die verschachtelten Kindansichten (in Regionen) werden bis zur neuen Navigation durch sie verloren.

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

Sie sollten nicht alle Ansichten in der initialize erstellen, da dies Sie Speicherlecks verursachen Deshalb sollten Sie dynamische Erstellung der Ansichten tun sollten. Außerdem würde ich empfehlen, eine allgemeine Funktion zum Anzeigen einer Ansicht in Ihrer Inhaltsregion zu erstellen, um die Wiederverwendbarkeit des Codes zu erhöhen. Ich würde Dir so etwas wie folgende Lösung vorschlagen:

//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. 
}