Question

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.

Answer 1

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>