Alex Rivera | Logout

Very basic Backbone/Underscore via Require.js issue driving me batty

Asked 2011-11-17T22:11:44.230
15

I am attempting to implement an EXTREMELY basic test that uses jquery, underscore.js and backbone.js loaded via require.js and for some reason I just cannot seem to get everything lined up properly. Research shows that others have not had these same problems so I know it must be something simple that I am just not seeing.

The problem I am having is that when backbone.js is loading, it cannot find a reference to _. I've found other people reporting the same issue but the problem was usually passing dependency references into handlers in the wrong order or other obvious problems. This is happening when backbone is loading.

I have also seen a number of 'mechanical' solutions such as 'put everything in the same file' and just loading them in a traditional way by having a number of script includes in the proper order but I REALLY want to get this working since it seems like such a powerful approach.

Initially I started with the structure here http://backbonetutorials.com/organizing-backbone-using-modules/ which works in the demo, but feels a little fragile because when I attempt to make very simple modifications or build up a simple sample from the ground up, it breaks.

After hitting my head against this for far too long, I went back and found this page Loading Backbone and Underscore using RequireJS with another simple example and I regained hope. However, after building up a new test based on it, I am STILL receiving the same issue even though the 0.5.3-optamd branch of backbone is supposed to handle its own dependency on underscore.

Without further ado, here is the super-straight-forward code that should work but instead is driving me insane. Here's hoping it's something obvious I just missed somehow:

index.ht

backbone.js underscore.js requirejs
Edit
Report

1 Answer

20

I have actually spent a lot of time struggling with this same exact problem!

Here's how I have managed to get it working...

First off, download the new sample require-js project with jQuery 1.7. In the zip file you'll find a file called require-jquery.js which includes jQuery 1.7 which is now AMD compliant.

Then download the latest version of require, which is now also AMD, and last, try this version of Backbone...

https://github.com/jrburke/backbone/blob/optamd/backbone.js

Burke has created this off of a fork of backbone and made an AMD compliant version.

Then...
Index.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Google Analytics API Browser</title>
        <!-- This is a special version of jQuery with RequireJS built-in -->
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>

    </body>
</html>

main.js 

require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'], 
function($,_,Backbone,app){
    app.init();
});

app.js

define(['jquery','backbone','scripts/home'], function($, Backbone, router){
    var init = function(){
        console.log("Started");
            // In here you can load your routers/views/whatever
    };

    return { init: init};
});

My file structure looks like
/app/index.htm
/app/require-jquery.js
/app/order.js
/app/main.js
/app/text.js
/app/scripts/app.js
/app/scripts/home.js
/app/lib/underscore-min.js
/app/lib/backbone.js

Let me know if that helps, hit me up on twitter @jcreamer898 if you need some more help, I am literally working on the same stuff!

UPDATE I recently created a Gith

answered 2011-11-18T03:27:30.797

Your Answer