Hiding a view in Region Manager, when another view is shown

Question

I am using the Marionette region manager to manage my views. There are three main regions: 1] Top menu region 2] Sidebar region 3] Main region ( the actual page that keeps changing )

Depending on actions on the top menu and the sidebar i keep changing the view that is rendered in the Main regions using App.MainRegion.show(view).

Now there is one particular view(persistView) which once rendered should be not be closed unless the tab/browser is closed.

Naturally i cannot use the App.MainRegion.show(view) here for foll reasons:

1. When the show(persistView) is called the first time everything is alright.
2. If i navigate away the show(otherview) will call close() of persistView. Which is not required.

My current solution is:

1. Have a new region called persistRegion just below the mainRegion.
2. persistView will always be rendered in the persistRegion.
3. In the onShow() of persistView, i hide the mainRegion and show the peristRegion

The above works but i think is very hackish. Also i am stuck when after step 3] the user navigates to any other view. Now how to i tell persistView that it should hide itself and show the mainRegion ?

Any help will be highly appreciated.

Solution 1

I think your layout sounds fine, in terms of having a region to hold the "persistent" view vs the main view. But I wouldn't let those two regions know about each other or try to control each other's display. Instead, I would create a separate object that knows how to do this.

This object would be responsible for listening to the correct events from the various views and regions involved. Then it would determine what regions to show and hide.

The key is in how you show and hide the regions, though. You don't want to close the regions and remove the views in them - at least, not the persistRegion. What you can do instead, though, is hide() the region's el

persistRegion.$el.hide()

and

persistRegion.$el.show()

the region's $el attribute will be available after a view has been displayed within the region, or after you call region.ensureElement().

Solution 2

I may suggest using the reset() method from marionette regions, instead of hiding and showing region's element. Here's a link to the doc http://marionettejs.com/docs/v2.4.4/marionette.region.html#reset-a-region =>A region can be reset at any time. This destroys any existing view being displayed, and deletes the cached el. The next time the region shows a view, the region's el is queried from the DOM.

myRegion.reset(); This is useful when regions are re-used across view instances, and in unit testing.