CODEWITHSUNDEEP
backbone.jsrequirejs
user469652
user469652

Reputation: 51251

BackboneJS + Requirejs: Backbone is null issue

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

Upvotes: 2

Views: 2949

Answers (2)

steve
steve

Reputation: 31

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.

  1. Find:

    (function(){var l=this,y=

  2. Replace it with:

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

  3. Add this to the bottom of the page:

    return l.Backbone;
});

Then do the same for underscore.js

  1. Prefix the beginning with:

    define('underscore',function(){

  2. Add to the bottom of the page:

    return this._;
});

Upvotes: -2

Tom Tu
Tom Tu

Reputation: 9593

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

Upvotes: 3

Related Questions