Question

I got several different views which are mostly built up like (layout-component, layout, main view).

When I now switch between different views the whole page has to get rerendered.

Wouldn’t it be better to cache at least the layout view in “window” and reload them?

Something like a singleton pattern for backbone views?

How do I do this?
Is a simple:

window.MainLayoutView || window.MainLayoutView = new MainLayoutView({ el: 'div.main' });

enough?

Is there anything else I have to think about?

Answer 1

Yes, there is more to worry about. If you do something like this:

window.MainLayoutView.render();
$(x).html(window.MainLayout.el);
// And later...
$(x).html(someOtherView.el);
// And later still...
$(x).html(window.MainLayout.el);

you’ll find that all your events inside window.MainLayout are gone. If you want to cache the instantiated view and swap it in and out, you’re going to have to arrange delegateEvents calls to rebind all the events all the way down the view hierarchy.

Compare the behavior of these two examples and you’ll see the problem:

• http://jsfiddle.net/ambiguous/Mrt3C/ (no delegateEvents calls).
• http://jsfiddle.net/ambiguous/Mrt3C/1/ (with delegateEvents calls).

Generally you don’t bother trying to cache views, just remove them and recreate them as needed.