CODEWITHSUNDEEP
backbone.jsrequirejs
Nicholas Murray
Nicholas Murray

Reputation: 13533

Adding module causes additional http request

When adding a Backstack as a module for a test app in my router file it throws a error 404 loading backbone.js

I can't figure out what is the cause, but an extra http get is added that requests js/Backbone.js which then throws a 404 as I only have my libs in the js/libs folder.

What could be the issue?

// index.html
<!DOCTYPE html>
<html>
<head>
<title>Starting Require</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<script data-main="js/main" src="js/libs/require.js"></script>
</head>
<body>
<div id="content">
</div>
</body>



// main.js
requirejs.config({
paths : {
  'jquery' : 'libs/jquery-1.8.2.min',
  'underscore' : 'libs/underscore',
  'backbone' : 'libs/backbone',
  'backstack' : 'https://github.com/pwalczyszyn/backstack/blob/master/backstack'
},
shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'backstack': {
        deps: ['backbone', 'underscore', 'jquery'],
    },
    'underscore': {
        exports: '_'
    }
}
});
require([
  'app',
    ], function(App){
  App.initialize();
});


// app.js
define([
'jquery', 
'underscore', 
'backbone',
'router'
], function($, _, Backbone, Router){
var initialize = function(){
Router.initialize();
};
return { 
initialize: initialize
};
});




// router.js
define([
'jquery',
'underscore',
'backbone',
'backstack'
], function($, _, Backbone, Backstack) {

var AppRouter = Backbone.Router.extend({
routes: {
  '': 'welcome'
}
});

var initialize = function(){
var app_router = new AppRouter;
app_router.on('route:welcome', function(){
    $('#content').html('Hello World!');
});
  };
  return { 
    initialize: initialize
  };
});

Upvotes: 0

Views: 74

Answers (1)

Paul Grime
Paul Grime

Reputation: 15104

backstack uses the Backbone module name, not backbone.

This fiddle uses only a capitalised Backbone module name and has no extra module load.

http://jsfiddle.net/MUSBk/

Or else you could define an alias (omit the module name if you place in a file called Backbone.js) - http://jsfiddle.net/3UXGZ/1/

define('Backbone', ['backbone'], function (Backbone) {
    return Backbone;
});

I'm not sure you can use your path config to point a new Backbone module to your existing Backbone JS, as this would probably load the same file as a second instance of Backbone, which might cause issues.

Upvotes: 1

Related Questions