BackboneJS + Requirejs: Backbone is null issue

Question

In the router.js. The firebug console alerts Backbone is null there. Why???

app.js

define([
  'order!jQuery',
  'order!Underscore',
  'order!Backbone',
  'order!router'  // Request router.js
],
function($, _, Backbone, Router){

    App = {
        initialize: function() {

            console.log("app.js initalize");
            Router.initialize();
        }
    };

    return App;
});

router.js

define([
   'order!Underscore',
   'order!Backbone'
],
function(_, Backbone){

    var AppRouter = Backbone.Router.extend({      
        // Console shows Backbone is null here, why? 
        // I'm sure the config is correct.
        routes: {

            '*actions': "defaultAction"
        },

        defaultAction: function(actions){
            // We have no matching route, lets just log what the URL was
            console.log('No route:', actions);
        }
    });

    var initialize = function(){
        console.log("Router initialize");
        var app_router = new AppRouter;

        Backbone.history.start();
    };
    return {
        initialize: initialize
    };

});

enter image description here

Tom Tu · Accepted Answer · 2012-02-19 01:51:39Z

3

Backbone does not support the AMD and it doesn't register as module. When required it registers normally as a global Backbone object, also since 1.3 Underscore doesn't support AMD neither and if you will require Backbone and Underscore under Backbone and _ namespaces they will overwrite its values in this modules scope to undefined cause of that.

jQuery supports AMD but it also registers itself as a global instance. Basically it means that you don't need to require jquery, underscore and backbone multiple times - it's enough if you do it once in your requirejs main script

answered Feb 19, 2012 at 1:51

Tom Tu

9,58338 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user469652 Over a year ago

Since it doesn't support AMD, is it still good to use requires? Would there be more issues coming after when performing production build? Thanks for your answer.

Tom Tu Over a year ago

It works perfectly fine with AMD it just doesn't register as AMD module but rather then that it registers in the global scope. We've used requirejs and backbone when building wunderkit.com and can't imagine not using these two! :)

jcreamer898 Over a year ago

You can also grab an AMD compliant version of Backbone and Underscore here...github.com/amdjs

n0minal Over a year ago

i'm lost. What should i do to correct the issue? I have the same issue. Also this one. "Module name 'underscore' has not been loaded yet for context: _" but when i refresh it disappears. its weird.

Tom Tu Over a year ago

just don't add it as a defined modules dependencies - require them once and the access them from global scope rather then requiring to each amd module

lcoq · Accepted Answer · 2012-05-22 17:08:49Z

-2

The alternative is to hack the backbone.js library.

Note: This will allow you to reference Backbone.js and underscore.js library within your require.js defines, but it will not stop them from being added to the global namespace/window object. This requires a little more hacking.

Find:
```
(function(){var l=this,y=
```

Replace it with:

define('backbone',['underscore','jquery'],function(_,$){
var l = this;
(function(){var y=

Add this to the bottom of the page:
```
return l.Backbone;
});
```

Then do the same for underscore.js

Prefix the beginning with:
```
define('underscore',function(){
```
Add to the bottom of the page:
```
return this._;
});
```

edited May 22, 2012 at 17:08

lcoq

10.7k3 gold badges35 silver badges52 bronze badges

answered May 21, 2012 at 16:00

steve

312 bronze badges

Collectives™ on Stack Overflow

BackboneJS + Requirejs: Backbone is null issue

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related