backbone.js - Correct URLs in multipage app -

i have multiple page backbone app based off of example: https://github.com/asciidisco/grunt-requirejs/tree/master/examples/multipage-shim , working fine base url. problem comes when navigate page no longer @ root of domain.

the directory structure looks this:

scripts   ├── app   │   ├── controller   │   │   ├── base.js   │   │   ├── c1.js   │   │   └── c2.js   │   ├── lib.js   │   ├── main1.js   │   ├── main2.js   │   ├── model   │   │   ├── base.js   │   │   ├── m1.js   │   │   └── m2.js   ├── common.js   ├── page1.js   └── page2.js 

so, e.g. if navigate http://localhost/, loads correctly following script tag:

    <script data-main="/scripts/page1"  src="/path/to/require.js"> 

(this loads page1, in turn loads common.js , main1.js).

however, if navigate http://localhost/another/url/, same script tag loads page1.js , common.js, when tries load main1.js, 404, because loading relative url (trying load http://localhost/another/url/scripts/app/main1.js.

my baseurl set 'scripts', , building using grunt (https://github.com/asciidisco/grunt-requirejs).

the contents of page1.js this:

//load common code includes config, load app logic page. require(['./common'], function (common) {     require(['app/main1']); }); 

for stumbling upon question, found workaround:

require.js supports having 2 separate baseurl parameters, 1 build step, , 1 used deployed javascript.

by setting build baseurl: 'scripts' , deployed baseurl: '/scripts' able ensure require tries fetch scripts root on server.