Bootstrapping einer Backbone-Anwendung

Question

Ich habe ein paar Wege gesehen, wie man das macht, aber ich kann nie herausfinden, welcher der richtige Weg ist.

Jeffrey Way from NetTuts+ und Addy Osmani instanziieren Sie eine "Haupt" Anwendungsansicht, um ihre Anwendungen zu starten.

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

Ryan Bates from Railscasts beginnt seine Anwendung durch einen Router instanziieren, die dann nachfolgende Anfragen behandelt:

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

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

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

Gibt es einen wichtigen Unterschied zwischen diesen beiden Wegen einer Anwendung Bootstrapping?

Ich mag, wie Ryan Bates ein App Objekt erstellt, an dem er alle seine Modelle anbringt, Ansichten, ... Er verwendet CoffeeScript, obwohl ich nicht sicher bin, ob dies einen Unterschied macht, wie dieses Objekt gehandhabt wird. Ich versuchte dies und ich konnte es nicht mit RequireJS an die Arbeit:

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(); 
    }); 
}); 

ich dann einen einfachen Router, die einen Loginview erstellt, wenn der Index Route getroffen wird:

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

    routes: { 
     '': 'index' 
    }, 

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

    }); 

    return Router; 
}); 

Und mein Loginview:

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

    }); 



    return LoginView; 
}); 

um Ryan Bates' Arbeitsweise zu folgen, wollte ich sein wie etwas tun:

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

aber ich bin mir nicht ganz sicher, wie dies unterscheidet sich von dem, was er tut, in Coffeescript:

class App.Views.LoginView extends Backbone.View 

Wenn ich log ‚App‘ auf die Konsole in initialize Methode ist meine Loginview, ich das Objekt von meinem Haupt bekommen .js-Datei, wenn ich versuche, etwas an das App.Views-Objekt anzuhängen, heißt es, dass App.Views nicht definiert ist. Muss hier etwas falsch gemacht werden?

Answer 1

Wenn Sie erstellen:

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

Es ist ganz anders aus:

class App.Views.LoginView extends Backbone.View 

Sie können die Coffee überprüfen, indem es von coffee to js Umwandlung:

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); 

Ich würde empfehlen, das Repo für todomvc's backbone-require setup zu überprüfen.

Ich habe einen Coffee todo setup basierte lose auf beiden mit einem globalen App-Objekt nicht an das Fenster angebracht ist, jedoch unter Verwendung von Unterobjekten Sammlungen, Modelle, Ansichten usw.