Question

I think I’m going about this the wrong way. This is what I’m trying to do instead of using RequireJS or LABjs:

var APP = {};
APP._timers = {};
APP._timelines = {};

$.when(
    $.getScript('/app/models/Timer.js'),
    $.getScript('/app/models/Section.js'),

    $.getScript('/app/collections/Timers.js'),
    $.getScript('/app/collections/Sections.js'),

    $.getScript('/app/views/SectionView.js'),
    $.getScript('/app/views/APPView.js'),

    $.Deferred(function(deferred){
        $(deferred.resolve);
    })
).done(function () {
    alert('done');
    console.log(APP.APPView);
    var foo = new APP.APPView;
    APP._timelines.main = new APP.Timers('main');
    APP._timelines.branched = new APP.Timers('branched');
}).fail(function(){
    alert('failed');
});

It is alerting failed, nothing is being written to the console.

If I open up any of those files, say APPView.js and alert something at the top or bottom of the file, I see it appear. Here’s an example of that file:

APP.APPView = Backbone.View.extend({
    el : $("#app-view"),
    initialize : function () {
        alert('App view initialized'); // Never gets called
        this.sectionVew = new APP.SectionView();
    }
});
alert('Inside APPView.js'); // gets called

Answer 1

I would think the reason why this is failing is because you try to load all your scripts inside $.when without managing dependencies. Each of the $.getScript is async and they do not necessary complete in order. Hence if your view loads before your model execution will stop when it will try to use the undefined model.
In short, to do this you would have to either:

1. manage the dependencies manually. i.e. once the model is loaded, THEN load the view.
2. write trully independent modules
3. and this is the simplest, stop trying to manually do all that and use an AMD loader such as require.js. This is the reason why it’s there!