How to define/use several routings using backbone and requirejs

Question

I divided my app in several apps.

main.js
app.js
app1/
  |- routing
  |- controller
  |- app
app2/
  |- routing
  |- controller
  |- app

1) When I try to use the routers in app1, they work.
2) When I try to use the routers in app2, they don't work.
3) If I comment the line 'js/app1/routing', in main.js the routers in app2 work.

Why do I get this behaviour?
Is there some example of app using multiple routing and requirejs on github?

thanks.

Here's my code:

---

** main.js **

define([
    'js/app',
    'js/app1/routing', // the routers in this app work
    'js/app2/routing'  // the routers in this app do not work but 
                       // if I comment the previous line (js/app1/routing',) 
                       // they works
],
function (App)
{
    "use strict";
    App.initialize();
});

---

** app.js **

define([],
function ()
{
    "use strict";
    var app = new Backbone.Marionette.Application();

    return app;
});

---

** app1/rotuing **

define(['backbone','app1/controller'], function(Backbone, controller)
{
    "use strict";
    var Router = Backbone.Marionette.AppRouter.extend({

        appRoutes: {
            '*defaults': 'index1'
        }

    });
    return new Router({
        controller: controller
    });

});

---

** app2/routing.js **

define(['backbone','app2/controller'], function(Backbone, controller)
{
    "use strict";
    var Router = Backbone.Marionette.AppRouter.extend({

        appRoutes: {
            'app2': 'index2'
        }

    });
    return new Router({
        controller: controller
    });

});

Answer 1

The problem is likely caused by the order in which the router files are loaded, and the routers are created.

Backbone's history object is responsible for executing routes. It collects all routes defined on all routers, when the routers are instantiated. Then it monitors the browser's url for changes. When it sees a change, it will take the first available matching route and fire that one route, skipping anything else.

When you have a *defaults route defined, everything matches this. Therefore, if this route is loaded first, nothing else will hit. So, you would need to be more explicit in your route parameters so that this one route doesn't hit all the time, or you would need to ensure that this router is loaded last.