Mostrare, nascondere, quindi visualizzare nuovamente interruzioni di layout Eventi

Question

Problemi con la visualizzazione, l'occultamento e la successiva visualizzazione di layout di marionette. Credo che questo problema si applichi anche alle normali visualizzazioni Backbone e alle Marionette ItemViews.

In sintesi, ho una vista genitore. Quando viene inizializzato, crea due layout figlio che devono essere utilizzati come contenuto della scheda. Il problema è che quando viene mostrato il contenuto delle schede di una scheda, viene visualizzato il contenuto di un'altra scheda, quando viene visualizzato di nuovo il contenuto della scheda originale, gli eventi non funzionano più.

I layout figlio vengono creati nella funzione initialize del layout principale e riutilizzati perché i loro stati devono essere preservati quando la navigazione si sposta su di essi.

Ecco un sample application che dimostra di cosa sto parlando:

Ecco un video che mostra gli eventi rotti: Video Link

Grazie mille!

Answer 1

Il problema è che non si crea una nuova istanza dei sub-layout e si riutilizza solo quello che si avvia nel layout principale. Pertanto, quando modifichi il contenuto della tua regione, gli eventi vengono sbloccati come parte della funzione close() di Marionette's View.

Si dovrebbe modificare la funzione di inizializzazione del genere:

initialize: function(){ 
    _.bindAll(this); 
    // CREATE SUB LAYOUTS 
    this.tab1Layout = B.tab1Layout; 
    this.tab2Layout = B.tab2Layout; 
}, 

E chiamare i layout in questo modo:

// EVENT HANDLERS 
on_show_tab_1_click: function(event){ 
    this.content.show(new this.tab1Layout()); 
}, 
on_show_tab_2_click: function(event){ 
    this.content.show(new this.tab2Layout()); 
} 

Answer 2

Se non si vuole ri-inizializzare le opinioni su ogni scheda modifica scheda puoi chiamare view.delegateEvents() manualmente:

// views[] is array of initialized tab views 
// Swap from displaying views[0] to views[1] 
currentTabIndex = 1 
this.myRegion.show(views[currentTabIndex]) 
views[currentTabIndex].delegateEvents() 

Per preservare lo stato, un'altra opzione è per rendere entrambe le linguette e semplicemente nascondere la regione scheda inattiva:

// Assume both regions have initialised views, tab2Region is hidden, 
// tab1Region is shown. 
// Swap between tabs: 
this.tab1Region.$el.hide() 
this.tab2Region.$el.show()