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

问题描述

https://tutsplus.com/course/build-your-own-slide-engine/\">来自NetTuts的Jeffrey Way 和 Addy Osmani 实例化一个主应用程序视图，以启动他们的应用程序。

  require（['views / app']，function（AppView）{
 new AppView（）; 
}）; 
  

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

  window.App = 
模型：{} 
集合：{} 
视图：{} 
路由器：{} 
 
 init： ; 
 new App.Router（）
 Backbone.history.start（）
} 
} 
 
 $（document）.ready  - > 
 App.init（）
  

这两种方式之间有一个重要区别应用程序？

我很喜欢Ryan Bates如何创建一个 App 对象， ...他使用CoffeeScript虽然，我不知道这是否有什么区别，这个对象如何处理。我试过这个，我不能让它工作与RequireJS：

  require（['jquery'，'backbone'路由器）{
 window.App = {
模型：{}，
集合：{}，
视图：{} 
 Aggregator：_.extend（{}，Backbone.Events），
 Hook：$（'＃application'），
路由器：路由器
 
 init： function（）{
 new App.Router（）; 
 Backbone.history.start（）; 
} 
} 
 $ {
 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是未定义的。

解决方案

创建时：

  App.Views.LoginView = Backbone.View.extend（{}）; 
  

与以下截然不同：

  class App.Views.LoginView extends Backbone.View 
  

将咖啡从咖啡转换为js ：

  var __hasProp = {} .hasOwnProperty，
 __extends = function（child，parent）{for（var key in parent）{if（__hasProp.call（parent，key） 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 $ b return LoginView .__ super __。constructor.apply（this，arguments）; 
} 
 
 return LoginView; 
 
}）（Backbone.View）; 
  

我建议您检查 todomvc的骨干网络需要设置。

一个咖啡馆 todo设置基于两个都没有附加的全局应用程序对象窗口，但使用子对象来保存集合，模型，视图等。

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

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

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?

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

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

And my loginView:

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

  });



  return LoginView;
});

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

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?

解决方案

When you're creating:

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

It's quite different from:

class App.Views.LoginView extends Backbone.View

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

I'd recommend checking out the repo for todomvc's backbone-require 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.

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