Search code examples
backbone.jsbackbone-viewsbackbone-routing

How to properly switch between complex Backbone Apps in a One-Page App


I'm having several complex views/apps that all together form one big app.

Think of gmail, where you have mail and contacts Or twitter, switching from profile view to settings In my case, it's a game where you can have a view to play and a map editor.

I'd like to switch between them without reload inside THE big main app.

Now I am struggeling with a concept on how to achieve two things:

  • How to switch properly (unbinding events, tearing down all views) without leaks
  • How to organize the routing, when all sub-apps can have their navigation items.

Concrete question:

There is a gameApp and an editorApp

If I am on "#game/12345/details/" and switch to "#editor/map/123", the following should happen:

1) Main router notices the app switch 2) tears down the game app and all subviews/events 3) switches and initializes editorApp 4) editorApp routes to map 123, loading the data

How would the main Router look like, taking the additional route params into account Should I use subrouters? Should I maybe leave the gameApp in Memory and just hide it? How would a function look like to handle the routing?

I know this is a lot of stuff, but maybe you can direct me on a tutorial/design pattern/.. site?

This Cleaning views with backbone.js? seems to be an option for switching apps, but it would not help on the subroutes


Solution

  • Have a look on the great Backbone.Marionette and the reference application BBCloneMail:

    https://github.com/derickbailey/backbone.marionette https://github.com/derickbailey/bbclonemail