引导 Backbone 应用程序答案

【问题标题】：Bootstrapping a Backbone application引导 Backbone 应用程序
【发布时间】：2013-02-24 15:50:28
【问题描述】：

我已经看到了几种方法来做到这一点，但我永远无法弄清楚哪种方法是“正确”的。

Jeffrey Way from NetTuts+ 和Addy Osmani 实例化一个“主”应用程序视图以启动他们的应用程序。

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

Ryan Bates from Railscasts 通过实例化一个路由器来启动他的应用程序，然后处理后续请求：

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

还有我的登录视图：

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

  });



  return LoginView;
});

为了遵循 Ryan Bates 的工作方式，我想做一些类似的事情：

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

但我不太确定这与他在咖啡脚本中所做的有什么不同：

class App.Views.LoginView extends Backbone.View

当我在我的 LoginView 的 initialize 方法中将“应用程序”记录到控制台时，我从我的 main.js 文件中获取对象，但是，当我尝试将某些内容附加到 App.Views 对象时，它显示 App.Views 。视图未定义。一定是这里做错了什么？

【问题讨论】：

我认为 require.js 和 Rails 方法不兼容。 Require.js 希望通过在define 调用中明确列出的依赖项来处理事情，这主要否定了对window.App 的需求。 Rails 的方式是通过资产管道将所有内容放在一大堆中，因此需要一个全局的window.App 来避免大混乱。 AFAIK，您必须将window.App 传递给define 函数，就像您必须将它们传递给Backbone 一样。我不是 require.js 的人，所以我可能会遗漏一些明显的东西。
谢谢。我仍在学习使用 Require.js，所以您所说的可能是正确的。我希望有人能够阐明这个问题。
不过不要太相信我，希望一些 require.js 的人会一起澄清事情。顺便说一句，App.Views.LoginView = Backbone.View.extend({}); 和 class App.Views.LoginView extends Backbone.View 在功能上是等效的。
FWIW，这是我的意见/方法：lostechies.com/derickbailey/2012/02/06/…
@muistooshort 你完全正确。使用 RequireJs 消除了对全局变量的需求。一切都封装在自己的模块中。如果 RequireJS 的行为类似于服务定位器并在调用之间保留模块的状态（假设模块确实封装了一个对象）。

标签： javascript backbone.js coffeescript requirejs amd

【解决方案1】：

创建时：

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

与以下完全不同：

class App.Views.LoginView extends Backbone.View

您可以通过从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);

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

我有一个coffeescript todo setup 松散地基于两者，全局应用程序对象未附加到窗口，但使用子对象来保存集合、模型、视图等。

【讨论】：