Backbone.js：ビュー、コレクション、モデルを別のjsファイルに分割すると、互いに認識できない

Question

Backbone.jsを使用してWebアプリケーションを作成し、すべてのビュー、コレクション、モデルを1つのjsファイルに書き込み、それは成功！

今、私は同じように、別のJSファイルにそれらを分けたい：jQueryの負荷の

<script type="text/javascript" src="js/layermanagemodel.js"></script>  
<script type="text/javascript" src="js/layermanagecollection.js"></script> 
<script type="text/javascript" src="js/layermanageview.js"></script>  
<script type="text/javascript" src="js/boot.js"></script> 

と負荷モデルコード：

$(function(){ 
    //Model 
     var manageModel = Backbone.Model.extend({ 
       default:{ 
        'selectedId':'unknow' 
       }, 
       selectLayer:function(uuid){ 
        this.set({"selectedId": uuid}); 
       }, 
       delLayer:function(){ 

       } 
     }); 
}) 

が、放火犯は私にバグ言う：

manageModel is not defined 
[Break On This Error] 

model: manageModel 

を

コレクションファイル

？別のファイルにそれらを分離場合

なぜ、彼らはどのように私はこの問題を解決するか、右ロード順序は何であることができ、互いを認識できなかったあなたは関数ラッパーを追加すると、あなたに

Answer 1

に感謝：？

$(function() { 
    // ... 
}) 

新しいスコープを導入しました。これらの関数内で宣言されたvarはすべて、それらの関数内でのみ表示されます。あなたはそれらのグローバル（windowのすなわち性質）することによって、これを回避することができます

$(function(){ 
    window.manageModel = Backbone.Model.extend({ 
     //... 
    }); 
}); 

以上、アプリケーションの名前空間を導入：そして

$(function(){ 
    window.app = window.app || { }; 
    window.app.manageModel = Backbone.Model.extend({ 
     //... 
    }); 
}); 

とapp.manageModelなどのappを通じて物事を参照してください。

$(function(){ 
    window.app = window.app || { }; 
    window.app.someCollection = Backbone.Collection.extend({ 
     model: app.manageModel, 
     //... 
    }); 
}); 

Answer 2

Require.jsを使用してjsファイルをモジュール化することもできます。非常にうまく動作し、ビュー、モデル、およびコレクションが必要なときにのみロードされます。これは、アプリケーションがかなり大きい場合にお勧めします。これにより、ページの読み込み時にすべてのスクリプトを読み込まなくて済むようになります。 backbone.jsの実装は次のようになります。

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/post' 
], function ($, _, Backbone, Post) { 
    "use strict"; 
    var PostsCollection = Backbone.Collection.extend({ 
     model: Post, 
     url: CONFIG.apiUrl + 'posts' 
    }); 
    return PostsCollection; 
}); 

上記は収集モジュールです。あなたは 'models/post'が別のモジュールの場所を指しているのを見ることができます。 jquery、アンダースコア、およびバックボーンは私の設定で定義されていたので、実際の場所を指すのとは対照的にそれらを渡すだけです。これは簡単なイントロですが、jsファイルを分割する場合は、Require.jsが道です。