Improved amd/requirejs support

[Jake Luer]

What I ultimately want to get to is like this example from backbone.modelbinding.

if (typeof define === 'function' && define.amd) {
    // AMD support
    define([
      'backbone',    // use Backbone 0.5.3-optamd3 branch (https://github.com/jrburke/backbone/tree/optamd3)
      'underscore',  // AMD supported
      'jquery'       // AMD supported
      ], function (Backbone, _, jQuery) {
        return modelbinding(Backbone, _, jQuery);
      });
} else {
    // No AMD, use Backbone namespace
    root.Backbone = Backbone || {};
    root.Backbone.ModelBinding = modelbinding(Backbone, _, jQuery);
}

[Saif Bechan]

Hi, are there any updates on this. I have been using your plugin with the greatest success in my project, but I am facing a problem now.

I just switched to a full require.js AMD implementation and I am having some trouble getting this to work. I stumbles uppon the same problem described here: #8

Problem is for me it does not work when I remove module.exports, and I am looking for a cleaner solution. The code described in this post looks promising, is there something available that would make it all work again.

[Jake Luer]

I haven't had a chance to work on this project recently, but lets see what I we can do... What versions of Backbone & Require.js are you using?

Also, @pgherveou, any suggestions on how you were able to get this working in your require.js setup?

[Saif Bechan]

Well, I got this working eventually. There must be far better solutions to this problem I guess, but here is what I did.

Using: Backbone.js [0.9.3], Underscore.js [1.3.3], Require.js [1.0.8].

To make them play nice I use a require.js plugin called use.js [0.3.0]: https://github.com/tbranyen/use.js

First off I updated to your newest version, 4.0.3, which had some improvements described here: 9be8781

This does not work out of the box, I had to change the top parts:

  var _, Backbone, exports;
  if (typeof window === 'undefined' || typeof require === 'function') {
    _ = require('use!underscore');
    Backbone = require('use!backbone');
    exports = Backbone;
  } else {
    _ = this._;
    Backbone = this.Backbone;
    exports = this;
  }

Note here I removed the line: if (module) module.exports = exports;
Even with the if-statement it produces errors.

Note also I require them using use!

---

Next stop is the require.js config, which basically looks something like this:

require.config({
    paths: {
        // Libraries
        jquery     : '_libs/jquery',
        underscore : '_libs/underscore',
        backbone   : '_libs/backbone',

        // Shim Plugin
        iosync     : '_plugins/backbone.iosync',
        iobind     : '_plugins/backbone.iobind',
        use        : '_plugins/use',
    },

    use: {
        backbone: {
            deps: ['use!underscore', 'jquery'],
            attach: function(){
                return window.Backbone.noConflict();
            }
        },

        underscore: {
            attach: '_'
        },

        iosync: {
            deps:['use!backbone']
        },

        iobind: {
            deps:['use!iosync']
        }
    }
});

Finally I have one main Backbone router that handles the creation of all the pages. I start it of with:

define(function(require){
    var Backbone = require('use!backbone'),
        iobind = require('use!iobind');

    /*...router code...*/
});

This will load iobind and iosync and execute them.

Everywhere else in my application I can use Backbone = require('use!backbone') and all is good. All the functionalities of Backbone.iobind work as normal, I do not need to require iobind or iosync ever again. Just one time at the main entry point of the application.

---

Still this method takes a lot of editing, and workarounds. If there are better methods please let me know.

[Jake Luer]

perhaps I need to have a amd/require dist and a non-requirejs dist. Something I'll look into as well.

Thanks for your info. Hopefully I can help you cut down on the work arounds.

[Evgeny]

Use UMD https://github.com/umdjs/umd