引导 Backbone 应用程序 [英] Bootstrapping a Backbone application

问题描述

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

I have seen a couple of ways on how to do this, but I can never figure out which is the 'correct' way.

来自 NetTuts+ 的 Jeffrey Way 和 Addy Osmani 实例化一个主"应用程序查看以启动他们的应用程序.

Jeffrey Way from NetTuts+ and Addy Osmani instantiate a 'main' application view in order to kick off their applications.

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

Railscasts 的 Ryan Bates 通过实例化一个然后处理后续请求的路由器:

Ryan Bates from Railscasts starts his application by instantiating a router which then handles subsequent requests:

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

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

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

这两种引导应用程序的方式之间是否有重要区别?

Is there an important difference between these two ways of bootstrapping an application?

我非常喜欢 Ryan Bates 如何创建一个 App 对象，他将所有模型、视图都附加到该对象上……虽然他使用的是 CoffeeScript，但我不确定这是否会对这个对象得到处理.我试过了，但我无法让它与 RequireJS 一起工作:

I quite like how Ryan Bates creates an App object to which he attaches all his models, views, ... He uses CoffeeScript though, I'm not sure if this makes any difference in how this object gets handled. I tried this and I couldn't get it to work with 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:

I then have a simple router which creates a loginView when the index route gets hit:

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 的工作方式，我想做一些类似的事情:

To follow Ryan Bates' way of working, I wanted to do something like:

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

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

but I'm not quite sure how this differs from what he does in coffeescript:

class App.Views.LoginView extends Backbone.View

当我在 LoginView 的 initialize 方法中将App"记录到控制台时，我会从 main.js 文件中获取对象，但是，当我尝试将某些内容附加到 App.Views 对象时，它说 App.Views 是未定义的.一定是这里做错了什么?

When I log 'App' to the console in my LoginView's initialize method, I get the object from my main.js file, however, when I try to attach something to the App.Views object, it says App.Views is undefined. Must be doing something wrong here?

推荐答案

创建时:

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

与以下完全不同:

class App.Views.LoginView extends Backbone.View

您可以通过将咖啡脚本从 coffee 转换为 js 来检查咖啡脚本:

You can check the coffeescript by converting it from 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 的主干的 repo-需要设置.

我有一个咖啡脚本 todo setup 松散地基于这两个全局应用程序对象不附加到窗口，而是使用子对象来保存集合、模型、视图等.

I have a coffeescript todo setup based loosely on both with a global app object not attached to the window, but using sub objects to hold collections, models, views etc.

这篇关于引导 Backbone 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！