使用Coffeescript和CodeKit在不同的文件中设置Backbone应用程序

Question

我通过CodeKit工具将Backbone.js与Coffeescript一起使用.

到目前为止,我已将所有内容都包含在一个文件中.但我想开始分离它们.在进入AMD和require.js之前,我想尝试一些简单的事情.

例如,我想遵循建议的内容

Backbone.js:将视图,集合,模型分离到不同的js文件,它们无法识别对方

而且由于我使用的CodeKit有一个"附加"(或导入)其他人引用的JS文件的选项,我认为这样可以很好地将所有内容都放在一个文件中.

所以这就是我想要实现的目标.

• 一个单独的文件"View.coffee"中的View文件
• 一个单独的文件"App.coffee"中的路径文件

并通过CodeKit将所有内容编译到App.js中,将视图文件"导入"到App.coffee中.

在我看来,我有以下内容

$ ->

  class View extends Backbone.View

    el:"#view"

    initialize: =>
      console.log app

在我的控制器中我有

$ ->

  class App extends Backbone.Router

    view : new View

    routes:
      "" : "home"

    search: =>
      console.log "hi"

  app = new App
  Backbone.history.start() 

现在在我的CodeKit中,我将"View.coffee"导入"App.coffee",以便将它们编译成单个文件.

当我运行它时,我得到"视图"没有定义.

现在,我在这里尝试了各种组合.例如,我尝试使用"window.View"和"window.App"将它们分配到全局名称空间,但这并不成功.我可以这样做,以便App可以阅读View,但我无法让View阅读App.

设置它的最佳方法是什么？或者我做得对吗？还附加了最终的JS输出.

// Generated by CoffeeScript 1.3.1
(function() {
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
    __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; };

  $(function() {
    var App, app;
    App = (function(_super) {

      __extends(App, _super);

      function App() {
        this.search = __bind(this.search, this);
        return App.__super__.constructor.apply(this, arguments);
      }

      App.prototype.view = new View;

      App.prototype.routes = {
        "": "home"
      };

      App.prototype.search = function() {
        return console.log("hi");
      };

      return App;

    })(Backbone.Router);
    app = new App;
    return Backbone.history.start();
  });

  /* -------------------------------------------- 
       Begin View.coffee 
  --------------------------------------------
  */


  $(function() {
    var View;
    return View = (function(_super) {

      __extends(View, _super);

      function View() {
        this.initialize = __bind(this.initialize, this);
        return View.__super__.constructor.apply(this, arguments);
      }

      View.prototype.el = "#view";

      View.prototype.initialize = function() {
        return console.log(app);
      };

      return View;

    })(Backbone.View);
  });

}).call(this);

Answer 1

当你这样做:

$ ->
  class View extends Backbone.View
    #...

你将你的View定义包装在一个函数中(实际上是两个函数:$()调用和通常的CoffeeScript包装器函数),因此该View函数之外的任何东西都无法访问该变量.即使CodeKit避免使用外部CoffeeScript包装函数,您仍然可以使用$()要添加的功能.结果是您的班级无法看到对方.

最简单的解决方案是声明一个应用程序级全局可访问的命名空间:

window.app = { }

然后在该命名空间中声明您的类:

$ ->
  class app.View extends Backbone.View
    #...

然后,您可以将该视图称为app.View您需要的位置.类似的事情将适用于您的路由器,模型和支持类.