0

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

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

例如，我想遵循中的建议

Backbone.js：将视图、集合、模型分离到不同的 js 文件中，它们无法相互识别

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

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

  • 在单独的文件“View.coffee”中查看文件
  • 单独文件“App.coffee”中的路由文件

并通过将视图文件“导入”到 App.coffee 中，通过 CodeKit 将所有内容编译到 App.js 中。

在我看来，我有以下

$ ->

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

1 回答 1

6

当你这样做时：

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

You're wrapping your View definition inside a function (actually two functions: the $() call and the usual CoffeeScript wrapper function) so the View variable is not accessible to anything outside that function. Even if CodeKit is avoiding the outer CoffeeScript wrapper function, you still have the $() function that you're adding. The result is that your classes can't see each other.

The easiest solution is to declare an application level globally accessible namespace:

window.app = { }

and then declare your classes inside that namespace:

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

Then you can refer to that view as app.View where ever you need it. Similar things will apply to your routers, models, and support classes.

于 2012-06-04T15:16:46.030 回答