Mostrar, Ocultar y luego volver a mostrar Diseños, cortes Eventos

Question

Problemas para mostrar, ocultar y volver a mostrar Diseños de marionetas. Sin embargo, creo que este problema también se aplica a las Vistas de columna vertebral regulares y a las Vistas de elementos de marionetas.

En resumen, tengo una vista principal. Cuando se inicializa, crea dos diseños secundarios que se deben usar como contenido de pestaña. El problema es que cuando se muestra el contenido de la pestaña de una pestaña, se muestra el contenido de otra pestaña, cuando se vuelve a mostrar el contenido de la pestaña original, los eventos ya no funcionan.

Los diseños secundarios se crean en la función initialize del diseño primario y se vuelven a usar porque sus estados deben conservarse cuando la navegación se mueve hacia ellos.

Aquí es una sample application que demuestra lo que estoy hablando:

Aquí hay un video que muestra los eventos rotos: Video Link

Gracias tanto!

Answer 1

El problema es que no crea una nueva istancia de sus subdistribuciones, y simplemente reutiliza la que inicia en su diseño principal. Entonces, cuando cambias el contenido de tu región, los eventos se desunen como parte de la función close() de Marionette's View.

Debe cambiar su función de inicialización de esa manera:

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

Y llama a los diseños de esta manera:

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

Si no desea volver a inicializar las vistas de fichas en cada cambio de ficha puede llamar a 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() 

Para preservar el estado, otra opción es para hacer ambas pestañas y simplemente ocultar la pestaña inactiva región:

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