Backbone.io, Backbone, and require.js

Question

How can I load Backbone.io, Backbone, and socket.io with Require.js's shim config?

It seems like everything else is loading just fine, just that when I attempt to run Backbone.io.connect() I get "Backbone is not defined". Backbone.io is served the same way socket.io is from the /socket.io directory that the socket.io server creates.

requirejs.config({
  baseUrl: 'javascripts/lib',
  paths: {
    jquery: 'jquery.min',
    bootstrap: 'bootstrap.min'
  },
  shim : {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ["underscore", "jquery"],
      exports: 'Backbone'
    },
    'bootstrap': {
      deps: ["jquery"]
    }
  }
})

requirejs(['jquery',
           'underscore',
           'backbone',
           'bootstrap',
           '../socket.io/socket.io.js',
           '../socket.io/backbone.io.js'
           ], function($, 
                       _,
                       Backbone,
                       bootstrap){

    Backbone.io.connect();
}

---

small update:

It seems like Backbone is defined just fine in the main requirejs function, it's just that backbone.io needs Backbone to be defined before it's initialized. How can I initialize the Backbone object and THEN the backbone.io library so it can do it's thing?

Answer 1

Here's how it ended up working for me:

Thanks landland, your answer helped the most.

requirejs.config({
  baseUrl: 'javascripts/lib',
  paths: {
    jquery: 'jquery.min',
    bootstrap: 'bootstrap.min',
    backbone: 'backbone',
    underscore: 'underscore',
    socketio: '../../socket.io/socket.io',
    backboneio: '../../socket.io/backbone.io'
  },
  shim : {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ["underscore", "jquery"],
      exports: 'Backbone'
    },
    'bootstrap': {
      deps: ["jquery"],
      exports: 'bootstrap'
    },
    'backboneio': {
      deps: ["backbone", "socketio"]
    }
  }
})

requirejs(['jquery',
           'underscore',
           'backbone',
           'bootstrap',
           'socketio',
           'backboneio'
           ], function($, 
                       _,
                       Backbone,
                       bootstrap,
                       titlealert,
                       waitForImages){
}

Answer 2

Try including backbone in your path

paths: {
    jquery: 'jquery.min',
    bootstrap: 'bootstrap.min',
    underscore: '<name of underscore file>',
    backbone: '<name of backbone file>'
},

I think that should do it. Remember not to include the .js in the file name. Also, if backbone.io depends on backbone you may need to add the dependencies under shim.

shim : {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ["underscore", "jquery"],
      exports: 'Backbone'
    },
    'bootstrap': {
      deps: ["jquery"]
    },
    'backbone.io': {
      deps: ["backbone"]
  }
}