CODEWITHSUNDEEP
backbone.jsrequirejs
Dmitry Fink
Dmitry Fink

Reputation: 1062

Dealing with require.js

I guess I do not completely understand the way require.js works. Here is a a simple module I've created:

requirejs.config({
  paths: {
    'underscore'    : 'libs/underscore-min',
    'backbone'      : 'libs/backbone-min'
  }
});

define([
  "underscore",
  "backbone"
  ], function(_, Backbone) {
    console.log(_);
    console.log(Backbone);
    var MyCollection = Backbone.Collection.extend({
        initialize: function() {
            this.on("all", function(event) {
                console.log(event);
            });
        }

    });

    return MyCollection;
});

I load it from my html:

<script data-main="js/mycollection.js" src="js/libs/require.min.js"></script>

The problem is it works intermittently. Sometimes Backbone object is there in the function when I need it, sometimes it doesn't (and gives me http://requirejs.org/docs/errors.html#notloaded error). If I just hit reload in the browser, I'd get 50/50 change of it working.

I must be missing something really basic here, the reported error doesn't make any sense to me, I thought the whole idea of the require.js mechanism is that my function will be called only when all the dependencies are loaded.

Upvotes: 2

Views: 487

Answers (2)

Steve Beer
Steve Beer

Reputation: 1348

Since Underscore and Backbone haven't been defined as AMD modules, require.js does not know that Underscore is a dependency of Backbone. So I guess what happens in 50% of your cases is that Underscore isn't loaded when Backbone tries to use it.

You can use the require.js shim config http://requirejs.org/docs/api.html#config-shim to tell require.js about the dependency structure.

Upvotes: 5

jmk2142
jmk2142

Reputation: 8581

My guess is that you're not using an AMD version of underscore and Backbone. If that's the case and the two packages aren't wrapped as AMD modules - then the define function which is meant for modules won't work like it should.

For non-module js scripts, the more appropriate form would be to use the require() function.

OR - you can find the AMD version of underscore and Backbone here. AMD support was taken out of Underscore and Backbone at some point.

AMD Underscore

AMD Backbone

Upvotes: 3

Related Questions