Problems loading backbonejs and underscorejs with requirejs

Question

I have problems loading this libraries with the shim option in RequireJS (maybe, because my poor background on that library). I try to look in documentation and see some other pages but the problem persist.

This is my app folder structure:

index.html
js/main.js
js/app/router.js
js/app/app.js
js/views/homeview.js
js/libs/backbone/backbone-1.0.0.js
js/libs/underscore/underscore-1.5.1.js
js/libs/jquery/jquery-1.10.2.js
js/libs/require/require-2.1.8.js

All start in index.html:

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>App</title>
    </head>
    <body>
        <div class="page">
            Loading...
        </div>
        <script data-main="js/main" src="js/libs/require/require-2.1.8.js"></script>
    </body>
</html>

That loads main.js

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
    },
    paths: {
        app:        'app',
        mod:        'app/mods',
        backbone:   'libs/backbone/backbone-1.0.0',
        underscore: 'libs/underscore/underscore-1.5.1',
        jquery:     'libs/jquery/jquery-1.10.2',  
    },
});

require([
    'app/app',
], function (App) {
    App.initialize();
});

That defines the paths to the libraries and the shim options for non-AMD libraries.

Then comes app.js

define([
        'app/router',
], function(Router) {
    var initialize = function() {
        //var router = new Router();
        //router.initialize();
            Router.initialize();
    };

    return {
        initialize: initialize,
    };
});

Then router.js:

define([
        'jquery',
        'underscore',
        'backbone',
        'app/views/homeview',
], function($, _, Backbone, HomeView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'home',
        }
    });

    var initialize = function() {
        var appRouter = new AppRouter();
        var homeView = new HomeView();

        appRouter.on('route:home', function() {
            userListView.render();
            console.log('We have loaded the home page.');
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize,     
    };
});

Now here i have a problem beacause looking at the network tab in the chrome developer tools only jquery loads, nor backbone or underscore.

Then, and finally, because it's defined a reference to a view, loads homeview.js

define([
        'jquery',
        'underscore',
        'backbone',
        'libs/text!app/tpl/home.html',
], function($, _, Backbone, HomeTpl) {
    var homeView = Backbone.View.extend({
        el: '.page',
        render: function() {
            //var self = this;
            //users.fetch({
            //  success: function() {
                    var template = _.template(HomeTpl, {});
                    //self.$el.html(template);                  
                    this.$el.html(template);
            //  }
            //});
        },
    }); 

    return homeView;
});

And the problem, because at line

var homeView = Backbone.View.extend({

shows the error: "Uncaught TypeError: Cannot read property 'View' of undefined", but i think that's because backbone never loads.

¿Can anyone tell what i'm doing terribly wrong? I looking the code and several pages all day and i cannot figure it out the answer. Thanks in advance and apoliges for the long question, buy i've seen many people having this same issue and maybe the answer could help others too.

So, to be clear, the code just like it is writen here works perfectly (with the corrections that i made to the post). Apparently all the problem was some kind of cache issues not reloading the updated libraries. Things that happen when dealing with many tools: you may think that the problem it's in some place, but it's in another. Thanks! — JetSpyDragon

Jesús Carrera Jesús Carrera · Accepted Answer · 2013-07-25T17:09:34

Can't find anything wrong, but you don't need to load the app modules in the paths

paths: {
  app: 'app', // remove

Problems loading backbonejs and underscorejs with requirejs

1 Answers