CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
MartinElvar
MartinElvar

Reputation: 5804

Backbone & Underscore is undefined, loaded thought

I'm currently trying to learn BackboneJS and the stuff which comes along, but i can't really get it to function. My problem is that, i get in trouble as soon as i try to use the Backbone object. So i tried to log the both of them, giving.

undefined main.js:23
undefined main.js:24

The code is below.

// RequireJS configuration.
require.config({
  paths: {
    // Major dependecies.
    jquery: 'libs/jquery/jquery-1.8.3.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',

    // Template dir.
    templates: '../templates'
  },

  // Append query string, to avoid browser caching, while in dev.
  urlArgs: "bust=" +  (new Date()).getTime()
});

// Start application.
require([
  'underscore',
  'backbone'
//  'router'
], function(_, backbone) {
  console.log(backbone);
  console.log(_);
//  Router.initialize();
});

As you can see, i've tried to use the Backbone object in my Router, but unsuccessful. Then i tried in my main.js, same thing.

Upvotes: 2

Views: 1245

Answers (3)

greenimpala
greenimpala

Reputation: 3966

You need to use a require shim as Backbone and Underscore do not support AMD out of the box.

A require shim allows you to load non-AMD modules (see here). Note that the exports object is the name of the object that will be used as the module.

paths: {
      // Major dependecies.
      jquery: 'libs/jquery/jquery-1.8.3.min',
      underscore: 'libs/underscore/underscore-min',
      backbone: 'libs/backbone/backbone-min',

      // Template dir.
      templates: '../templates'
},
shim: {
    backbone: {
        deps: ["underscore", "jquery"],
        exports: "Backbone"
    },

    underscore: {
        exports: "_"
    }
}

An alternative is to include the scripts directly in your HTML.

<script src="libs/jquery/jquery.js"></script>
<script src="libs/underscore/underscore.js"></script>
<script src="libs/backbone/backbone.js"></script>

Upvotes: 6

Shauna
Shauna

Reputation: 9596

I suspect it's an error in how you're referencing your files through require.js (or backbone doesn't play well with require). Check your browser's developer tools and make sure that you're actually downloading the files. Either the "console" or the "net" tab should indicate whether you're getting the files successfully (HTTP code 200), or it's not finding them (HTTP code 404), or it's not even trying (no line in "Net" at all).

Additionally, try taking require.js out of the loop entirely and load your files directly onto your page using the standard <script> tags. That way you know your files and variables work as expected.

Upvotes: 0

machineghost
machineghost

Reputation: 35740

Personally I've found it's much easier to just leave Backbone (and Underscore, and jQuery) out of Require. You can load them the normal way (via a script tag) and then do all your Require loading after that, and everything will work perfectly. You'll have a few global variables ($, _, and Backbone), but other than that I've found now downsides to this approach.

Alternatively, you can waste lots of time playing with shims and such to bring Backbone in to Require-land properly ... but why waste that time if you don't have to? Plus, if you do it that way you have to include jQuery/Backbone/Underscore in the define call of every file you have, which is sort of a waste of time/energy.

Upvotes: 2

Related Questions