Question

I got following router.js:

define(['jquery', 'underscore', 'backbone', 'views/settings/index'], function($, _, Backbone, SettingsView) {

    var Router = Backbone.Router.extend({

        container: $('div.main'),

        routes: {
                "settings": "settings"
                , "settings/:query": "settings"
        },

        settings: function(query) {
            this.container.html(SettingsView.render().el);
        }

    });

    if (Router._instance) return Router._instance;

    Router._instance = new Router();

    return Router._instance;

});

The router gets called in the main.js filed which is marked as first dependency in the requirejs config:

define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, router) {

    // ajax settings (sent cors cookies)
    $.ajaxSetup({ xhrFields: { withCredentials: true } });

    // register master router
    window.router = router;

    // start backbone history
    Backbone.history.start({ root: "/" });          

});

In some view I now want to do:

define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, router) {

    var View = Backbone.View.extend({

        initialize: function() {
            router.on('route:settings', this.change, this);
        },

        change: function(query) {
            // load some new content for example
        }

    });

    return View;

});

Than I am getting this error message:

Uncaught TypeError: Cannot call method 'on' of undefined 

UPDATE:
I added a console.log to each module. So I know in which order the modules are executed. I mentioned that requirejs has the wrong order:

view.js -> main.js -> router.js

instead of:

router.js -> main.js -> view.js

Let see how I can solve this

UPDATE2:
I now wrapped the router event binding part into a setTimeout loop:

        setTimeout(function() {
            window.router.on('route:settings', this.select, this);        
        }.bind(this), 20);

And see there it works!

This truly just is a fix but nevertheless a fix 🙂

Answer 1

Why are you trying to create a singleton instance on your router?

Requirejs resolves every module only once as far as I understand and
as far as I would expect from any decent module loader.

#router.js
define(['jquery', 'underscore', 'backbone', 'views/settings/index'], 
  function($, _, Backbone, SettingsView) {
  //your code omitted ...

  //no need to do this
  //if (Router._instance) return Router._instance;
  //Router._instance = new Router();
  //return Router._instance;

  //this should work as well and give you a "singleton" instance
  return new Router();

});