Bootstrapping a Backbone application

Question

I have seen a couple of ways on how to do this, but I can never figure out which is the 'correct' way.

Jeffrey Way from NetTuts+ and Addy Osmani instantiate a 'main' application view in order to kick off their applications.

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

Ryan Bates from Railscasts starts his application by instantiating a router which then handles subsequent requests:

window.App =
    Models: {}
    Collections: {}
    Views: {}
    Routers: {}

    init: ->
        new App.Router()
        Backbone.history.start()
    }
}

$(document).ready ->
    App.init()

Is there an important difference between these two ways of bootstrapping an application?

I quite like how Ryan Bates creates an App object to which he attaches all his models, views, ... He uses CoffeeScript though, I'm not sure if this makes any difference in how this object gets handled. I tried this and I couldn't get it to work with RequireJS:

require(['jquery', 'backbone', 'router'], function ($, Backbone, Router) {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Aggregator: _.extend({}, Backbone.Events),
        Hook: $('#application'),
        Router: Router,

        init: function() {
            new App.Router();
            Backbone.history.start();
        }
    }
    $(document)ready(function() {
        App.init();
    });
});

I then have a simple router which creates a loginView when the index route gets hit:

define(['backbone', 'loginView'], function(Backbone, LoginView) {
  var Router = Backbone.Router.extend({

    routes: {
      '': 'index'
    },

    index: function() {
      var loginView = new LoginView();
    }  

  });

  return Router;
});

And my loginView:

define(['backbone'], function(Backbone) {
  var LoginView = Backbone.View.extend({

  });



  return LoginView;
});

To follow Ryan Bates' way of working, I wanted to do something like:

App.Views.LoginView = Backbone.View.extend({});

but I'm not quite sure how this differs from what he does in coffeescript:

class App.Views.LoginView extends Backbone.View

When I log 'App' to the console in my LoginView's initialize method, I get the object from my main.js file, however, when I try to attach something to the App.Views object, it says App.Views is undefined. Must be doing something wrong here?

Answer 1

When you're creating:

App.Views.LoginView = Backbone.View.extend({});

It's quite different from:

class App.Views.LoginView extends Backbone.View

You can check the coffeescript by converting it from coffee to js:

var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

App.Views.LoginView = (function(_super) {

  __extends(LoginView, _super);

  function LoginView() {
    return LoginView.__super__.constructor.apply(this, arguments);
  }

return LoginView;

})(Backbone.View);

I'd recommend checking out the repo for todomvc's backbone-require setup.

I have a coffeescript todo setup based loosely on both with a global app object not attached to the window, but using sub objects to hold collections, models, views etc.