Question

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

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

例如，我想按照

中的建议进行操作

Backbone.js:separate the view ,collection,model to different js file,they could't recognize each other

由于我正在使用CodeKit，它有一个“附加”（或导入）其他人引用的JS文件的选项，我认为这样可以很好地将所有内容放在一个文件中。

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

在单独的文件“View.coffee”中查看文件
路径文件位于单独的文件“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”，以便将它们编译成单个文件。

"App.coffee" has "View.coffee" imported

当我运行它时，我没有定义“视图”。

现在，我尝试了各种组合。例如，我尝试使用“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，无论您需要它。类似的事情将适用于您的路由器，模型和支持类。

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

1 个答案: