title: Very basic Backbone/Underscore via Require.js issue driving me batty
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Initially I started with the structure here <a href="http://backbonetutorials.com/organizing-backbone-using-modules/" rel="nofollow noreferrer">http://backbonetutorials.com/organizing-backbone-using-modules/</a> 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.</p>
  
  <p>After hitting my head against this for far too long, I went back and found this page 
  <a href="https://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs">Loading Backbone and Underscore using RequireJS</a>
  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.</p>
  
  <p>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:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Backbone.js/Underscore.js via Require.js Learning Page&lt;/title&gt;
          &lt;script src="js/libs/require/require.js"&gt;&lt;/script&gt;
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;Backbone.js/Underscore.js via Require.js Learning Page&lt;/div&gt;
          &lt;div class="testhook"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js/main.js</p>
  
  <pre><code>require.config({
      paths: { 
              'jquery': 'libs/jquery/1.7/jquery',
              'underscore': 'libs/underscore/1.2.2/underscore',
              'backbone': 'libs/backbone/0.5.3-optamd/backbone'
      },
      baseUrl: '/js',
      urlArgs: 'v=1.0'
  });
  
  require([
           'domReady',
           'app'
           ], 
           function( domReady, App ){
              domReady(function(){
                  console.log( 'Dom is ready' );
                  App.init();
              });
          }
  );
  </code></pre>
  
  <p>js/app.js</p>
  
  <pre><code>// Filename: app.js
  define([
          'jquery', 
          'underscore', 
          'backbone'
          ], 
          function( $, _, Backbone ){
  
              var init = function(){
  
                  console.log( 'app.js &gt; init()' );
  
                  // jquery test (WORKS)
                  $('.testhook').append('testhook append');
  
                  // underscore test (WORKS)
                  console.log( _.map([1, 2, 3], function(n){ return n * 2; }));
  
                  // backbone test (DIES)
                  var artist = new Backbone.Model({
                        firstName: "Wassily",
                        lastName: "Kandinsky"
                      });
  
                      artist.set({birthday: "December 16, 1866"});
  
                      console.log(JSON.stringify(artist));
              }
  
              return { init: init };
          }
  );
  </code></pre>
  
  <p>The exact console output is:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'extend' of undefined (backbone.js:150)
  main.js:18    Dom is ready
  app.js:11     app.js &gt; init()
  app.js:17     [2, 4, 6]
  app.js:20     Uncaught TypeError: Cannot read property 'Model' of null (app.js:20)
  
  NOTE:
  Line 150 in unminified backbone.js is:
  _.extend(Backbone.Model.prototype, Backbone.Events, {
  </code></pre>
  
  <p>I am on a Windows 7 machine using Chrome 17.0.938.0 dev-m.</p>
  
  <p>My script versions are:</p>
  
  <pre><code>backbone:       0.5.3-optand
  jquery:         1.7
  require:        1.0.1
  underscore:     1.2.2
  </code></pre>
  
  <p>My directory structure is:</p>
  
  <pre><code>js
  +-- libs/
  ¦       +-- backbone/
  ¦       ¦     +-- 0.5.3-optamd/
  ¦       ¦                 +-- backbone.js
  ¦       +-- jquery/
  ¦       ¦     +-- 1.7/
  ¦       ¦          +-- jquery.js
  ¦       +-- require/
  ¦       ¦      +-- require.js
  ¦       +-- underscore/
  ¦              +-- 1.2.2/
  ¦                    +-- underscore.js
  +-- app.js
  +-- domReady.js
  +-- main.js
  +-- order.js
  index.html
  </code></pre>
  
  <p>I cannot believe how much difficulty this is giving me and am really hoping someone can shed some light on what the heck is going on here. </p>