Настройка приложения Backbone в разных файлах с помощью Coffeescript и CodeKit

Я использую Backbone.js с Coffeescript через инструмент CodeKit.

До сих пор я включал все в один файл. Но я хочу начать их разделять. Прежде чем попасть в AMD и требовать.js, я хотел попробовать что-то простое.

Например, я хотел следовать тому, что было предложено в

Backbone.js: отделить представление, коллекцию, модель на разные js-файлы, они не могут распознавать друг друга

И поскольку я использую CodeKit, который имеет возможность «добавлять» (или импортировать) JS-файлы, на которые ссылаются другие, я думаю, что это хорошо поместит все в один файл.

Итак, вот чего я хочу достичь.

• Файл просмотра в отдельном файле "View.coffee"
• Файл маршрута в отдельном файле "App.coffee"

И все компилируется в Приложение.js через CodeKit путем «импорта» файла представления в App.coffee.

В моем View у меня есть следующее

$ ->

  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», чтобы назначить их в глобальное пространство имен, но это не увенчалось успехом. Я мог бы сделать так, чтобы приложение могло читать 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);