7

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
    });

});
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134

1 Answers1

5

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.

Derick Bailey
  • 72,004
  • 22
  • 206
  • 219
  • Thanks for your answer. In fact, if I set `'': 'index1'` instead of `'*defaults': 'index1'` it will work. Thanks again. – Lorraine Bernard Jun 17 '12 at 20:49
  • @DerickBailey http://stackoverflow.com/questions/20017210/router-js-function-not-executed Can you help me out here :) – CodeGuru Nov 16 '13 at 11:15
  • @DerickBailey it actually seems that in practice the opposite of what you describe is true: if you're using some kind of catchall route, it needs to be loaded _first_ in order for the other more specific routes to work. Ideally the behaviour would be specified so that we could rely on it, one way or the other. – Louis Simoneau Jan 30 '14 at 01:10