Backbone.js：將視圖，集合，模型分開到不同的js文件，它們不能互相識別

我使用Backbone.js創建一個web應用程序，所有視圖，集合和模型都寫入一個js文件，它成功了！Backbone.js：將視圖，集合，模型分開到不同的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(){ 

       } 
     }); 
})

但螢火蟲告訴我的錯誤：

manageModel is not defined 
[Break On This Error] 

model: manageModel

收集文件中

？

爲什麼如果他們分開到不同的文件，他們都認不出對方如何解決這個問題，或者什麼是正確的加載順序謝謝

來源

2012-05-18 hh54188

一旦你添加的功能包裝：

$(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-18 04:00:00

謝謝，我有一個問題：爲什麼我應該做一個像window.app = window.app ||這樣的判斷。 {}？爲什麼要定義它？ – hh54188

@ hh54188：'window.app = window.app ||如果沒有'window.app'，{}'會將'window.app'設置爲一個空對象，並且如果它已經被設置，''window.app'就會獨立;這樣做可以使JavaScript文件更加獨立，並且不受加載順序的影響。然後，一旦我們知道它在那裏，我們就可以把它放進去。如果'window.app'是一個很好的提示，你真的希望它是全局的，你可以使用'app'。 –

你也可以看看讓你使用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-18 06:40:22 TYRONEMICHAEL

Backbone.js：將視圖，集合，模型分開到不同的js文件，它們不能互相識別

回答

相關問題