Question

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.

Answer 1

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