How to set up a simple Backbone/Marionette project and their dependencies using require.js

2
votes

I've been reading a lot on this, and even bought a book specifically on setting up marionette apps with require.js, and followed this little how-to on github which seemed pretty straightforward... However for some reason I can't seem to get something as simple as starting an empty Marionette project to work!

My project is structured like so:

  • Root Directory
    • models
    • views
    • libs
      • babysitter.js
      • backbone.js
      • jquery.js
      • marionette.js
      • require.js
      • text.js
      • tpl.js
      • underscore.js
      • wreqr.js
    • collections
    • templates
    • index.html
    • main.js

Here's my index.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="main" src="libs/require.js" type="text/javascript"></script>
</body>
</html>

And my main.js:

require.config({
    paths:{
    jquery:"libs/jquery",
    underscore: "libs/underscore",
    backbone: "libs/backbone",
    text: "libs/text",
    tpl: "libs/tpl",
    marionette: 'libs/marionette',
    'backbone.wreqr' : 'libs/wreqr',
    'backbone.babysitter' : 'libs/babysitter'
    },
    shim:{
    underscore:{
        exports: "_"
    },
    backbone:{
        deps: ['underscore','jquery'],
        exports:'Backbone'
    }
    }
});

require(['marionette'],function(Marionette){


var Application = new Marionette.Application();

Application.on("initialize:after", function(){
    alert("Application has started!");
});

    Application.start();
});

I downloaded the AMD / RequireJS version of Marionette.js from their site

Upon opening up index.html in a browser, I see an error in the console "Reference Error: Backbone is not defined" (on marionette.js line 20)

What am I doing wrong?

3
javascriptbackbone.jsrequirejsmarionette
I looked at the AMD / RequireJS version of Marionette.js from their site, and noticed in the comments at the top, that two libraries are already included in the source: wreqr and babysitter. You don't need to include those in your project. marionettejs.com/downloads/core/amd/backbone.marionette.js – Rick Suggs

3 Answers

0
votes

Marionette requires backbone so either add marionette to your shim or to your require call,

shim:{
  marionette : ['backbone'],
  ...
}

or

require(['backbone', 'marionette'],function(Backbone, Marionette){
0
votes

I think your Backbone shim might be set up incorrectly. In looking at Marionette's AMD version, it takes a dependency on 'backbone', not 'Backbone'.

(function (root, factory) {
  if (typeof exports === 'object') {

  var underscore = require('underscore');
  var backbone = require('backbone');
  var wreqr = require('backbone.wreqr');
  var babysitter = require('backbone.babysitter');
0
votes

I had the same problem, and had spent hours on this issue. The issue I found after digging into the backbone source code version 1.1.2:

(function(root, factory) {

  // Set up Backbone appropriately for the environment. Start with AMD.
  if (typeof define === 'function' && define.amd) {
    define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
      // Export global even in AMD case in case this script is loaded with
      // others that may still expect a global Backbone.
      root.Backbone = factory(root, exports, _, $);
    });

  // Next for Node.js or CommonJS. jQuery may not be needed as a module.
  } else if (typeof exports !== 'undefined') {
    var _ = require('underscore');
    factory(root, exports, _);

  // Finally, as a browser global.
  } else {
    root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender ||   root.$));
  }

}(this, function(root, Backbone, _, $) {

By removing the first two conditions and only leave the third one:

root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender ||   root.$));

I was able to make my optimized code with rjs works

Here is my requirejs config

require.config({
  baseUrl: "/static/src/scripts/js",
  paths: {
    jquery: 'vendors/jquery/jquery',
    underscore: 'vendors/underscore/underscore',
    backbone: 'vendors/backbone/backbone',
    marionette: 'vendors/backbone/backbone.marionette'
  },
  shim: {
    jquery: {
      exports: "jQuery"
    },
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    marionette: {
      deps: ['backbone'],
      exports: 'Marionette'
    }
  }
});

Hope it helps