Backbone.marionnette - Riassetto eventi vs creazione nuova vista

Question

Ho uno Layout che ha diverse schede. Facendo clic su una di queste schede sarà show la vista composita appropriata nel contenuto della pagina region. Dopo aver spostato avanti e indietro tra diverse schede, ho notato che le viste composite hanno perso i collegamenti nativi per eseguire il rendering sulla reimpostazione della raccolta e sulle modifiche del modello.

C'è un modo per riconciliare gli eventi utilizzati in _initialEvents di una vista composita quando si mostra una vista per una seconda volta, oppure dovrei creare una nuova vista composita ogni I show una scheda?

Attualmente sto creando tutte le mie viste in initialize del mio Layout e quindi utilizzando show con la vista quando si fa clic su una scheda.

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

Questo non suona come l'approccio migliore per me.

È necessario utilizzare i manager dell'area del layout per visualizzare le viste senza dover ricorrere a funzioni come quelle definite dall'utente.

vorrei andare per questo approccio

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

poi in seguito:

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

Se si desidera continuare lungo la strada che si è in poi si sarebbe probabilmente meglio usare questo approccio :

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

Ha senso?

È difficile suggerire la migliore linea d'azione senza vedere più struttura attorno a questo.

C'è un motivo per cui si stanno creando le viste in initialize?

Answer 2

Marionetta (v.1) onwords utilizza Backbone.BabySitter per gestire viste secondarie.

Nel tuo caso fai lo stesso. Basta creare un containter per memorizzare tutte le tabulazioni. Successivamente interrogare il contenitore per restituire la vista che è necessario visualizzare.

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

Per mostrare Più tardi la vista solo fare questo

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

In stretta metodo vostra visualizzazione Layout di chiudere con successo tutti vista in un contenitore

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

Answer 3

indossate non è necessario creare un layout/Vista oggetto/composito/raccolta ogni volta che si passa da una scheda all'altra, al contrario è possibile salvare il contenuto in una variabile proprio come si sta facendo, il problema è che la variabile viene ripresentata e ogni volta che vuoi rendere il contenuto. La soluzione è che devi verificare se tale variabile (this.places_page) è dichiarata se non la appendi alla vista così quando la chiami più volte manterrà la stessa vista di layout senza alcun problema, tieni conto che quando rendere la vista principale (quella che contiene le regioni) le viste figlio nidificate (nelle regioni) andranno perse fino alla nuova navigazione attraverso di esse.

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

Non si deve creare tutti i punti di vista all'interno della inizializzazione come Ciò causerà perdite di memoria è per questo che si dovrebbe fare la creazione dinamica dei punti di vista. Suggerirei anche di creare una funzione comune per mostrare una vista nella vostra area di contenuto per aumentare la riutilizzabilità del codice. Vorrei suggerire qualcosa di simile a seguente soluzione:

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