Backbone.marionnette - Rearrange events and create a new view

Question

I have a Layout that has several tabs. Clicking on one of these show tabs will display the corresponding composite view in the contents of the region page. After navigating between the various tabs, I noticed that the composite views lost their own bindings for rendering in the reset collection and changing the model.

Is there a way that I should rewrite the events used in the _initialEvents composite view when showing the view a second time, or do I need to create a new composite view each time I show tab?

I am currently creating all of my views in the initialize my Layout , and then using show with the view when the tab is clicked.

 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

You do not need to create a Layout / Item / Composite / Collection view every time you switch from tab to tab, on the contrary, you can save the contents in a variable the way you do, the problem is that the variable is re-declared every time you want to display content. The solution is that you need to check if this variable is declared (this.places_page) if it is not added to the view, so when you call it more than once, it will have the same layout without any problems, just note that when rendering the main view (the one in which the regions are stored), nested child views (in the regions) will be lost until they begin to pass through them.

 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 2

This does not seem to be the best approach for me.

You should use layout area managers to display views without having to perform functions like you defined.

I would go for this approach

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

and then:

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

If you want to continue on the road you are on, you will probably be best off using this approach:

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

It makes sense?

It is difficult to offer a better course of action without seeing more structure around it.

Is there a reason you are creating views in initialize ?

Answer 3

Marionette (v.1) onwords uses Backbone.BabySitter to manage submissions for children.

In your case, you do the same. Just create a container to hold all kinds of tabs. Request a container later to return the view you need to display.

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

Later show submission just do it

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

In a tight method, your layout view successfully closes all views in the container

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

Answer 4

You do not have to create all the views inside the initialization, as this will lead to a memory leak due to why you should do the dynamic creation of views. In addition, I would suggest creating a generic function to display the submission of content in your region to increase code reuse. I would suggest you something like the following solution:

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