0

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?

1 Answer 1

2

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:

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

2
  • using .append doesn't cause the event reference to be lost.. .html actually gets the html as a string, so you're not even really referencing the view el..
    – Stephen
    Jul 22, 2012 at 19:50
  • @Stephen: But you're not going to use append to replace content unless you empty first, the effect will be the same (jsfiddle.net/ambiguous/dcFDL). And I think you're confused about how .html() works (jsfiddle.net/ambiguous/3ZJCq). Jul 22, 2012 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.