Question

I’m trying to create a site using Jquery Mobile, Backbone and RequireJS. But the problem I am having is the site randomly break and reasons why the break are different:

• JQuery is Undefined
• Backbone is Undefined
• Extended views of backbone are not defined
• etc etc etc

And I cannot pinpoint our the reason why because it works sometimes but when I refresh it, it suddenly doesn’t. I’m loading my code like this(libraries followed by views):

requirejs(["/js/libs/jquery-1.8.3.min", "/js/libs/jquery.mobile-1.2.0.min", "/js/libs/underscore-1.4.3", "/js/libs/json2", "/js/libs/backbone.0.9.9"], function($,JQM, underscore, json2, bb) {

});

requirejs(["/js/views/pageview", '/js/views/home'], function(util) {

    HomeView = new HomeView({el : '#home', 'id' : 'home'})
});

Am I doing something wrong by doing it this way?

Answer 1

Libraries like jQuery Mobile, Backbone and Underscore are not AMD modules, just plain old javascript files. And because they’re not modules, they don’t declare dependencies, they just expect to find $ or _ in the global scope.

The loading order of RequireJS is indeterministic – so there’s no telling which of them will load first. If Backbone is evaluated first, it won’t find the window._ it’s looking for and crashes.

RequireJS supports non-AMD modules via the shim config (see docs), which allows you to declare the dependencies between these libraries. After configuring the shim, RequireJS knows how to load the dependent libraries before those that depend on them.

A typical RequireJS config with the shim element would look something like:

requirejs.config({
  //libraries
  paths: {
      jquery:       'libs/jquery/jquery',
      backbone:     'libs/backbone/backbone',
      underscore:   'libs/underscore/underscore',
      jquerymobile: 'libs/jquery.mobile-1.2.0/jquery.mobile-1.2.0',
  },

  //shimming enables loading non-AMD modules
  //define dependencies and an export object
  shim: {
      jquerymobile: {
          deps: ['jquery'],
          exports: 'jQuery.mobile'
      },
      underscore: {
          exports: '_'
      },
      backbone: {
          deps: ['jquerymobile', 'jquery', 'underscore'],
          exports: 'Backbone'
      }
  }
});

The paths part is not mandatory, you could just use the file paths as keys in the shim section. However, when you use the paths aliases, you can then import those libraries with the short name instead of the whole path:

define(['jquery', 'backbone'], function($, Backbone) { ... });