Question

I have a module like the following defined in one file

define(['mod1', 'mod2'], function (mod1, mod2) {

    var IndexView = Backbone.View.extend({

        ...

    });

    return new IndexView;

});

And this is required from within another file (my Backbone router file) with the following

require(['src/views/index']);

Can I make the returned IndexView object accessible from within the router’s scope without resorting to storing a reference in my app’s namespace?

Answer 1

Passing around instances of Backbone views/models with require.js will quickly make your life very unhappy. It would be much easier to make your modules only return the definitions of the views/models, that way can instantiate them all inside the same scope.

So if you make your view module return just the definition:

// IndexView module
define(['dep1', 'dep2'], function (dep1, dep2) {

    var IndexView = Backbone.View.extend({

        ...

    });

    return IndexView;

});

You can then instantiate it inside your router:

// our main requirejs function
requirejs(['path/to/indexview'], function (IndexView) {

    var AppRouter = Backbone.Router.extend({

        initialize: function () {

            // bind our IndexView to the router
            this.IndexView = new IndexView();

        }

    });

    // start the app
    var app = new AppRouter();

});

That way your code is still modular with Require.js, but you can pass around the router’s scope using this.