Switching views in backbone for navigating between pages - whats the right way?

Question

I have made a decision to change my application routing to client side rather than server side. This means I will need a way to switch views in and out of the page as the user navigates the site. The only thing I could find that attempts to document this is this article: How to switch views using Backbone.js

I see how this would work, but I don't think is a great way of doing it. I want to keep my views - as that's the whole point right? To have separate views for the distinguishable parts of your application? I think having one big "ContentView" and then just pulling stuff into it and re-rendering is a bit crude and bypasses all the cool modularisation you can do otherwise.

So what is the best way to go about it? Ideally I want a function similar to what is documented in the aforementioned article, but takes a backbone view as its argument.

Answer 1

I've written a few articles on this subject:

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

and an newer one that takes the idea from this post and formalizes it more:

http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

re-using views is actually an anti-pattern in most cases. there's usually a lot of additional code and extra cruft involved in holding on to view instances, to get them to re-attach themselves to the DOM and handle registered DOM events correctly. Additionally, you run the risk of memory leaks (which my first article talks about) and destroying your application performance by using up too much memory.

If your views are using an "expensive" resource, you should cache that resource outside of your views and re-use it. Your views should be cheap and fast to create, render, display, and destroy.