Backbone.js and Require.js

Question

I want to create Backbone.js app with Require.js. But I have an error in console: Uncaught Error: Module name "underscore" has not been loaded yet for context: _. Use require([])

require.config({
        baseUrl: 'js/',
        paths : {
            'jquery' : 'jquery',
            'underscore' : 'underscore',
            'backbone' : 'backbone',
            shim: {
                'underscore': {
                    exports: '_'
                },
                'backbone': {
                    deps: ['underscore', 'jquery'],
                    exports: 'Backbone'
                }

            }
        }
    });

    define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){

        var Model = Backbone.model.extend({});
        var model = new Model;
    });

    require(['app','jquery', 'backbone', 'underscore']);

How I can resolve this problem?

try changing the order in define call to jquery, underscore, backbone — coding_idiot
– coding_idiot, Commented Feb 1, 2015 at 10:46
possible duplicate of Trouble combining Require.js and Backbone.js/Underscore.js — Louis
– Louis, Commented Feb 1, 2015 at 11:21

Peter Wagener · Accepted Answer · 2015-02-07 02:42:21Z

1

You still need to list underscore as a part of paths so you can refer to it in the shims. Also, not sure what your directory structure looks like, but I'm writing this with the assumption that library code is in the /js/libs directory). Finally, note you won't need to require any of the dependencies of app -- the joy of RequireJS is that it'll figure out what to load.

So...

require.config({
    baseUrl: 'js/',
    paths : {
        'jquery' : 'lib/jquery',
        'underscore' : 'lib/underscore',
        'backbone' : 'lib/backbone',
    },
    shim: {
        'underscore': {
            exports: '_'
        },
       'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }

    }
});

define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){
    var Model = Backbone.Model.extend({});
    var model = new Model({
        foo: 'bar'
    });

    var app = {
        model: model
    };

    // ...

    return app;
});

require(['app'], function(App) {
    App.model.get('foo'); // <<=== returns 'bar'
});

edited Feb 7, 2015 at 2:42

answered Feb 2, 2015 at 2:03

Peter Wagener

2,09214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Seredenko Over a year ago

Excellent! Thank you very much. But one correction: App.model.get('foo');

Peter Wagener Over a year ago

Edited to match the example. Thanks for accepting the answer!

Kumaran · Accepted Answer · 2015-02-01 11:12:11Z

1

The shim is mentioned inside the paths object. I am not sure if that is the problem, but wanted to mention that here.

answered Feb 1, 2015 at 11:12

Kumaran

414 bronze badges

Comments

Will · Accepted Answer · 2015-01-31 16:08:54Z

-1

You need Underscore.js as listed in your require statement.

answered Jan 31, 2015 at 16:08

Will

5445 silver badges16 bronze badges

3 Comments

Alexander Seredenko Over a year ago

Oh. I don't understand you. Can you show an example?

Will Over a year ago

require(['app','jquery', 'backbone', 'underscore']); requires Underscore.js. Download and link to it as you would any other JS file.

Alexander Seredenko Over a year ago

I've downloaded Underscore.js. It is in folder with other scripts.

Collectives™ on Stack Overflow

Backbone.js and Require.js

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related