Marionette/Backbone View Caching

Question

I'm wanting to cache ItemView html with one (or potentially its own) region in Marionette.

The process is staged in different views with different forms. On visiting the each stage we want to append show the certain ItemView but we also want to be able to re-visit any previous views and it's html to change the form data and continue by updating subsequent views.

Here I have just added the view to the region on routing call.

buildView: function (page) {
    try {
        var view = new View[page]();
    } catch (error) {
        console.debug('This View Doesn\'t Exsist --> [' + page + ']', error);
    }

    Layout.body.show(view, { preventDestroy: true });
}

I am able to keep the previous view using different regions for each ItemView..

buildView: function (page) {
    var _region = Layout[page], _view;

    if (_region.hasView()) {
        _region.show(_region.currentView);
    } else {
        try {
            _view = new View[page]();
        } catch (error) {
            console.debug('This View Doesn\'t Exsist --> [' + page + ']', error);
        }
        _region.show(_view, {preventDestroy: true});
    }
}

Does anyone know a good solution for this type of usage and showing previous ItemView's whilst being able to update the new view if necessary?

Should we just revert back to hiding and showing each region when needed and let this store our rendered html?

Happy to provide more information if anyone is not sure what i'm trying to explain here!

Thanks, sorry for rough and potentially not very insightful Q ^^.

Please provide some relevant code, to help us understand the context and your previous attempts. — Krystian Laskowski
I have updated the Question with a few bits of source.. happy to provide more but i think this shows the main purpose. — Hamish Hossack
What's your reason for doing this? It won't achieve noticeable performance difference and if it's for pagination there are better approaches — Dominic
It's a pagination style modal, each view is quite complex and a change in the previous view determines what is in the subsequent views. If you could enlighten me on better approaches It would be much appreciated! — Hamish Hossack

Evan Hobbs Evan Hobbs · Accepted Answer · 2015-07-14T19:31:27

There's a lot of different ways you could do this but I would advise against trying to cache and reuse views. It's not going to improve performance noticeably and there's nothing wrong with throwing views away and creating new ones.

If I were doing it I would consider seeing each step as a model in a collection and then each view you add stepwise can have access to the whole collection if it needs to know the data from previous views.

So here's some hypothetical code which may or may not match your use-case:

var steps = new Backbone.Collection();

steps.add({
  name: null,
  address: null
});

var view1 = new Step1View({ model: steps.last() });

region.show(view1);

//...
//now something happens and you're ready to show the next view

steps.add({
  age: null,
  occupation
})

var view2 = new Step2View({ model: steps.last() });
//if view2 needs to know about previous steps it has access to all the data as this.model.collection

region.show(view2);

//...
//now if you need to go back you can just pop the last model off the stack and show the view1 again
steps.pop();

var view1 = new Step1View({ model: steps.last() });
region.show(view1);

I'd do something like that though I'd refactor/abstract it a bit more.

Marionette/Backbone View Caching

1 Answers