Showing, Hiding, then re-showing Layouts breaks Events

Question

Having trouble showing, hiding, and then re-showing Marionette Layouts. I believe this problem also applies to regular Backbone Views and Marionette ItemViews as well though.

In summary, I have a parent view. When it is initialized, it creates two child layouts that are meant to be used as tab content. The problem is that when tab content from one tab is shown, then content from another tab is shown instead, when the original tab content is shown again, the events do not work anymore.

The child layouts are created in the initialize function of the parent layout and re-used because their states need to be preserved when navigation moves back to them.

Here is a sample application that demonstrates what I am talking about:

Here is a video showing the broken events: Video Link

Thanks so much!

Answer 1

The problem is that you don't create a new istance of your sub-layouts, and just re-use the one you initiate in your main layout. So when you change the content of your region the events get unbinded as part of the close() function of Marionette's View.

You should change your initialize function like that:

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

And call the layouts in this way:

// 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());
}