Backbone.js for a

multi-page app

@drivy

Drivy

Namespacing

Multiple projects

window.Drivy = {
  Views: {
    Booking: {
      Steps: {}
    },
    Cars: {},
    Search: {},
    Cms: {},
    Dashboard: {
      Rentals: {},
      Calendars: {},
      Cars: {},
      Payments: {}    },    ...  }
}

Drivy.Views.Cars.Show = (function() {
  function Show() {
    new Shared.Views.Facebook.Share();
    new Shared.Views.Twitter.Share();

    new Bootstrap.Components.Maps.Map();
    new Bootstrap.Components.CarCalendar();
    new Bootstrap.Components.Tabs();

    new Drivy.Views.Cars.Slideshow();
  }  return Show;
})();

Drivy.Views.Search.Show = (function() {
  function Show() {
    new Shared.Views.Facebook.Login();

    var search = new Drivy.Models.Search();

    new Drivy.Views.Search.Form({
      model: search
    });
    new Drivy.Views.Search.Results({
      model: search
    });
    new Drivy.Views.Search.Map({
      model: search
    });  }  return Show;
})();

View auto loading

Where the magic happens

Bootstrap.Utils.parseNamespace = function(id) {
  return _.compact(_(id.split('-')).map(function(word) {
    return _.classify(word);
  })).join('.');
};
// Bootstrap.Utils.parseNamespace("dashboard-cars-show")
// > "Dashboard.Cars.Show"

// Called in layout only once
Drivy.loadView = function() {
  var action, viewNamespace, loadedView;
  action = $('body').data('action');
  if (!action) return;
  viewNamespace = Bootstrap.Utils.parseNamespace(action);
  loadedView = Bootstrap.Utils.findDeepKey(Drivy.Views,
                                           viewNamespace);
  if (loadedView) {
    new loadedView();
  }
}

You said Ajax ?

Drivy.Events.on("popin_ajax_content_added", function() {
  var id = $(".mfp-content .popin").attr("id");
  var namespace = Bootstrap.Utils.parseNamespace(id);
  var popinView = Bootstrap.Utils.findDeepKey(Drivy.Views,                   
                                              namespace);
  if (popinView) {
    new popinView();
  }
})

CoffeeScript

Classes

class Drivy.Views.Cars.Show extends Backbone.View
  initialize: ->
    # Do something awesome  

Inheritance

class Bootstrap.Models.RentalDates extends Backbone.Model
  defaults:
    startDate: new Date()
    endDate: new Date()

class Drivy.Models.RentalParameters extends          Bootstrap.Models.RentalDates
  defaults:
    distance: 200
    
class Drivy.Models.Search extends Drivy.Models.RentalParameters
  toJSON: ->
    return _.pick(this.attributes, "startDate",
                  "endDate", "distance")