Adding backbone routes asynchronously.

Question

I'm stuck with a big backbone application.

It's running different applications within the main application. And we want to add the apps and also the routes asynchronously to the big app.

What I do now is to add the different apps asynchronously with Require.JS after the main apps is loaded. To add the new routes to the main routing I'm stop history and add the new routes and do a history start again. This works but, it has one major drawback. Every time I go to (app.navigate('x',true);) a new existing path fires the routing as many times I have history.started it. Also all the view render.

This slows the app down a lot and is totally inefficient.

Is there a way to dynamically add new routes without having to history.stop/start?

Answer 1

You don't have to stop/start Backbone.history each time you add new routes, Backbone modifies its state when you call router.route or create a new router.

So, either manually add routes to your router:

var R = Backbone.Router.extend({
    routes: {
    }
});

var r = new R();
Backbone.history.start();

r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

or instantiate a new router

var R = Backbone.Router.extend({
  routes: {
  }
});

var r = new R();
Backbone.history.start();

var R2 = Backbone.Router.extend({
    routes: {
        'added': 'added'
    },
    added: function() {
        console.log('added: '+window.location.hash);
    }
});
var r2 = new R2();

and a demo

var R = Backbone.Router.extend({
  routes: {
    "help": "help"
  },
  help: function() {
      console.log('help : '+window.location.hash);
  }
});


var r = new R();
Backbone.history.start();
r.navigate('help', {trigger: true});


var R2 = Backbone.Router.extend({
  routes: {
    "r2": "r2"
  },
  r2: function() {
    console.log('r2 : '+window.location.hash);
  }
});
var r2 = new R2();
r2.navigate('r2', {trigger: true});


r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

r.navigate('added', {trigger: true});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

<a href='#help'>help</a>
<a href='#r2'>r2</a>
<a href='#added'>added</a>