引导Backbone应用程序

Question

我已经看到了几种如何做到这一点的方法,但我永远无法弄清楚哪种方法是"正确的".

来自NetTuts + 和Addy Osmani的Jeffrey Way实例化了一个"主要"应用程序视图,以启动他们的应用程序.

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

来自Railscasts的Ryan Bates通过实例化路由器来启动他的应用程序,该路由器随后处理后续请求:

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

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

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

这两种引导应用程序的方式之间是否存在重要差异？

我非常喜欢Ryan Bates如何创建一个App对象,他将所有模型,视图都附加到其中......然而,他使用CoffeeScript,我不确定这是否会对此对象的处理方式产生任何影响.我试过这个,我无法使用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();
    });
});

然后我有一个简单的路由器,当索引路由被命中时创建一个loginView:

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

    routes: {
      '': 'index'
    },

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

  });

  return Router;
});

我的loginView:

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

  });



  return LoginView;
});

为了遵循Ryan Bates的工作方式,我想做一些事情:

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

但我不太确定这与他在coffeescript中所做的有何不同:

class App.Views.LoginView extends Backbone.View

当我在我的LoginView initialize方法中将'App'记录到控制台时,我从main.js文件中获取对象,但是,当我尝试将某些内容附加到App.Views对象时,它表示App.Views未定义.一定是在做错了吗？

Answer 1

当您创建时：

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

它与以下内容完全不同：

class App.Views.LoginView extends Backbone.View

您可以通过将 Coffeescript 从Coffee 转换为 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);

我建议查看todomvc 的backbone-require setup 的存储库。

我有一个咖啡脚本待办事项设置，松散地基于两者，全局应用程序对象未附加到窗口，但使用子对象来保存集合、模型、视图等。