Using RequireJS and Backbone across different pages in a CodeIgniter web app

Question

I'm building a web app with CodeIgniter in the back and Backbone/RequireJS in the front. As such, it's not a single page web app, but rather still uses CI for a lot of the controller actions, and Backbone for various views at different times. I have RequireJS/Backbone setup like this:

<script type="text/javascript" data-main="main" src="require.js"></script>

main.js looks like:

require.config({
  paths: {
           jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
           underscore: "libs/underscore",
           backbone: "libs/backbone",
           //Lots of other stuff
          },
  shim: {
           backbone: {
              deps: ["underscore", "jquery"],
          }
          // lots of other stuff
  }
  });

require(['views/app'], function(AppView){
    var app_view = new AppView;
});

Main.js is loaded in my master template i.e. on every page, and in turn loads a bunch of views that are common throughout the site/app - header, navs, etc.

But on different pages I also want to load different views in addition to the common ones. So, for example, on a page called 'publish' - almost an app in itself - I do:

<script type="text/javascript" src="publish.js"></script>

Which is loaded after main.js and looks like:

//publish.js
 require(['views/publishview], function(PublishView){
 var publishView = new PublishView;
 });

Basically, it works half the time, and the other half (when I hammer refresh) I get 404s on everything.

So is there a neat way to use my basic require config for everything, but also require different parts at different times? It seems easy enough to do if the the whole thing was an SPA, but for me, a large part of the app is still with CodeIgniter.

Sorry for not phrasing this better.

Answer 1

Not sure if it's the right way, but what I would do:

Template (php)

<script type="text/javascript">
var myApp = {};
myApp.section = '<?= $section ?>'; //for exambple 'someSection'
</script>
<script type="text/javascript" data-main="main" src="require.js"></script>

Then, use something like:

(main.js)

var requires = {
someSection: {files: ['views/app'], handler: function(AppView){
    var app_view = new AppView;
}}
};

var myRequire = requires[myApp.section] || null;
if(myRequire) require(myRequire.files, myRequire.handler);

Or... use window.location.pathname value instead myApp.section