Bootstrap di un'applicazione Backbone

Question

Ho visto un paio di modi su come farlo, ma non riesco mai a capire quale sia il modo corretto.

Jeffrey Way from NetTuts+ e Addy Osmani creare una vista dell'applicazione "principale" per avviare le applicazioni.

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

Ryan Bates from Railscasts inizia la sua applicazione istanziando un router che poi gestisce le richieste successive:

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

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

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

C'è una differenza importante tra questi due modi di bootstrap un'applicazione?

Mi piace molto il modo in cui Ryan Bates crea un oggetto App a cui si collegano tutti i suoi modelli, viste, ... Usa comunque CoffeeScript, non sono sicuro che questo faccia alcuna differenza nel modo in cui questo oggetto viene gestito. Ho provato questo e non ho potuto farlo funzionare con 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(); 
    }); 
}); 

Ho poi avere un semplice router che crea un LoginView quando il percorso dell'indice viene colpita:

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

    routes: { 
     '': 'index' 
    }, 

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

    }); 

    return Router; 
}); 

E il mio LoginView:

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

    }); 



    return LoginView; 
}); 

per seguire modo di lavorare Ryan Bates', ho voluto fare qualcosa di simile:

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

ma non sono del tutto sicuro di come questo si differenzia da quello che fa in CoffeeScript:

class App.Views.LoginView extends Backbone.View 

Quando accedo 'App' per la console in modalità di mio LoginView initialize, ottengo l'oggetto dal mio principale file .js, tuttavia, quando provo ad allegare qualcosa all'oggetto App.Views, si dice che App.Views non è definito. Deve fare qualcosa di sbagliato qui?

Answer 1

Quando si sta creando:

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

E 'molto diverso da:

class App.Views.LoginView extends Backbone.View 

È possibile controllare il CoffeeScript, convertendolo da 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); 

mi piacerebbe consigliamo di controllare il pronti contro termine per todomvc's backbone-require setup.

Ho un CoffeeScript todo setup liberamente ispirato sia con un oggetto applicazione globale non attaccato alla finestra, ma utilizzando gli oggetti secondari per tenere collezioni, modelli, viste ecc