Maintain a stack of Marionette ItemViews within a Marionette Layout

Question

I would like to know if it possible to extend in some way the mechanism Marionette Layouts are based on creating a sort of stack like navigation.

Marionette behaviour.

Before a region show()'s a view it calls close() on the currently displayed view. close() acts as the view's destructor, unbinding all events, rendering it useless and allowing the garbage collector to dispose of it.

My scenario.

Suppose I have a sort of navigation mechanism where a Layout acts as controller and first displays an ItemView called A, then a click somewhere allows to switch to ItemView B. At this point, an action on B (like for example a tap on a back button) allows to return to A without recreating it.

How is it possible to achieve the previous scenario without creating again A and maintaning its state?

For iOS people, I would like to mimic a sort of UINavigationController.

Any advice?

EDIT

My goal is to restore a prev cached view with its state without creating it again.

My scenario is the following. I have a layout with two regions: A e B. I do a click somehere within A and A and B are closed to show C and D. Now a back click would restore A and B with their states. Events, models, etc...but since views are closed events are removed.

Answer 1

Use a backbone router to listen to URL change events. Setup routes for each of your views and then have the router call the layout to change the view it's displaying in response to each route. The user could click back or forward any number of times and the app responds accordingly and displays the correct view. Your router might look like:

var Router = Backbone.router.extend({
    routes: {
        'my/route/itemViewA': 'showItemViewA',
        'my/route/itemViewB': 'showItemViewB'
    },

    showItemViewA: function () {
        layout.showItemView('a');
    },

    showItemViewB: function () {
        layout.showItemView('b');
    }
});

Your layout might look something like this:

var Layout = Backbone.Marionette.Layout.extend({

    regions: {
        someRegion: 'my-region-jquery-selector'
    },

    initialize: function () {
        this.createViews();
    },

    createViews: function () {
        this.views = {
            a: new Backbone.Marionette.ItemView,
            b: new Backbone.Marionette.ItemView
        };
    },

    showItemView: function (view) {
        this.someRegion.show(this.views[view]);

        // You might want to do some other stuff here
        // such as call delegateEvents to keep listening
        // to models or collections etc. The current view
        // will be closed but it won't be garbage collected
        // as it's attached to this layout.
    }
});

The method of communication between the router and the layout doesn't have to be a direct call. You could trigger further application-wide events or do anything else you can think of. The router above is very basic but gets the job done. You could create a more intelligent router to use a single route with parameters to determine dynamically which itemView to show.

Every time the user does something that requires changing views, you can update the browser's history by using router.navigate('my/route/itemViewB', {trigger: true});. Also, if you set up your app to only render on history change events then you don't need to set up two mechanisms for rending each view.

I use this pattern in my own apps and it works very well.

Answer 2

@Simon's answer is headed in the correct direction. However, the only way to stop Marionette from closing views is to modify a bit of it's Region code.

var NoCloseRegion = Marionette.Region.extend({
    open: function(view) {
        // Preserve the currentView's events/elements
        if (this.currentView) { this.currentView.$el.detach(); } 

        // Append the new view's el
        this.$el.append(view.el);
    }
});

The, when be sure to specify our new Region class when creating the Layout view

var Layout = Backbone.Marionette.Layout.extend({
    regions: {
        someRegion: {
            selector: 'my-region-jquery-selector',
            regionType: NoCloseRegion
        },
    },
    initialize: function () {
        this.createViews();
    },
    createViews: function () {
        this.views = {
            a: new Backbone.Marionette.ItemView,
            b: new Backbone.Marionette.ItemView
        };
    },
    showItemView: function (name) {
        // Don't `show`, because that'll call `close` on the view
        var view = this.views[name];
        this.someRegion.open(view)
        this.someRegion.attachView(view)
    }
});

Now, instead of calling show which closes the old view, renders the new, and attaches it to the region (and triggers a few events), we can detach the old view, attach the new, and open it.