5

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

今、私はそれらを別のjsファイルに分けたいと思っています。

<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>

jqueryロードでモデルコードをロードします。

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

                }
        }); 
})

しかし、firebugは私にバグを教えてくれます：

manageModel is not defined
[Break On This Error]   

model: manageModel

コレクションファイル内

それらを別のファイルに分割すると、お互いを認識できなかったのはなぜですか？この問題を解決するにはどうすればよいですか？または正しいロード順序とは何ですか？ありがとうございます

4

2 に答える 2

9

関数ラッパーを追加したら：

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

新しいスコープを導入しましたvar。これらの関数内で宣言されたすべてのは、これらの関数内でのみ表示されます。windowそれらをグローバル（つまり、のプロパティ）にすることで、これを回避できます。

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

以上の場合、アプリケーションの名前空間を導入します。

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

次に、次appのように参照しapp.manageModelます。

$(function(){
    window.app = window.app || { };
    window.app.someCollection = Backbone.Collection.extend({
        model: app.manageModel,
        //...
    });
});
于 2012-05-18T04:00:00.193 に答える
3

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が最適です。

于 2012-05-18T06:40:22.223 に答える