0

CodeKit ツールを介して Coffeescript で Backbone.js を使用しています。

これまで、すべてを 1 つのファイルに含めてきました。しかし、私はそれらを分離し始めたいです。AMD と require.js に入る前に、簡単なことを試してみたかったのです。

たとえば、私はで提案されたことに従いたかった

Backbone.js: ビュー、コレクション、モデルを別々の js ファイルに分離すると、それらは相互に認識できませんでした

また、他の人が参照するJSファイルを「追加」（またはインポート）するオプションがあるCodeKitを使用しているため、これによりすべてが1つのファイルにうまく収まると思います。

だからここに私が達成したいことがあります。

  • 別ファイル「View.coffee」内のViewファイル
  • Routeファイルを別ファイル「App.coffee」に

そして、View ファイルを 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" にインポートして、1 つのファイルにコンパイルしました。

実行すると、「ビュー」が定義されていません。

さて、ここでいろいろ組み合わせてみました。たとえば、「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
    #...

定義を関数 (実際には呼び出しと通常の CoffeeScript ラッパー関数のView2 つの関数) 内にラップしているため、その関数の外部から変数にアクセスすることはできません。CodeKit が外側の CoffeeScript ラッパー関数を回避している場合でも、追加する関数は引き続き使用できます。その結果、クラスはお互いを見ることができなくなります。$()View$()

最も簡単な解決策は、アプリケーション レベルでグローバルにアクセス可能な名前空間を宣言することです。

window.app = { }

次に、その名前空間内でクラスを宣言します。

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

その後、必要に応じてそのビューを参照できますapp.View。同様のことが、ルーター、モデル、およびサポート クラスにも当てはまります。

于 2012-06-04T15:16:46.030 に答える