Hide a view in the Region Manager when another view is displayed

Question

I use the Marionette region manager to manage my views. There are three main regions: 1] Top menu area 2] Sidebar area 3] Main region (actual page that continues to change)

Depending on the actions in the top menu and sidebar, I constantly change the view that is displayed in the main regions using App.MainRegion.show(view) .

Now there is one specific view ( persistView ), which after display should not be closed if the tab / browser is not closed.

Naturally, I cannot use App.MainRegion.show(view) here for the following reasons:

• When show(persistView) is called for the first time, everything is fine.
• If I leave, show(otherview) will call close() from persistView . What is not required.

My current solution:

• Create a new area called persistRegion just below mainRegion .
• persistView will always be displayed in persistRegion .
• In onShow() of persistView I will hide mainRegion and show peristRegion

The above works, but I think these are very hacks. I also get stuck when after step 3 the user goes to any other view. Now, how to tell persistView that it should hide and show mainRegion ?

Any help would be greatly appreciated.

Answer 1

I think your layout sounds great in terms of having a region to maintain a “permanent” look and basic look. But I would not let these two regions know about each other or try to control each other. Instead, I would create a separate object that knows how to do this.

This object will be responsible for listening to the correct events from various species and regions. Then he will determine which regions will be displayed and hidden.

The key is how you show and hide areas. You do not want to close areas and delete them in them - at least not in persistRegion . However, instead you can make hide() an el region

persistRegion.$el.hide()

and

persistRegion.$el.show()

the region attribute $el will be available after the view is displayed within the region or after calling region.ensureElement() .

Answer 2

I can suggest using the reset () method from puppet regions, rather than hiding and showing a region element. Here is a link to the document http://marionettejs.com/docs/v2.4.4/marionette.region.html#reset-a-region => The area can be reset at any time. This destroys any existing view that is displayed and removes the cached el. The next time the region shows a view, the el region is requested from the DOM.

myRegion.reset (); This is useful when regions are reused for instance viewing and unit testing.