Backbone.js: Trennen Sie die Ansicht, Sammlung, Modell zu verschiedenen js-Datei, sie konnten sich nicht erkennen

Question

Ich benutze Backbone.js, um eine Web-App zu erstellen, die alle Ansicht, Sammlung und Modell in eine js-Datei schreiben, es Erfolg!

jetzt will ich sie auf verschiedene js Dateien trennen, so wie:

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

und Lastmodellcode in jquery Last:

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

       } 
     }); 
}) 

aber die Firebug sagen Sie mir Bug:

manageModel is not defined 
[Break On This Error] 

model: manageModel 

in Sammlungsdatei

?

, warum, wenn sie in anderer Datei zu trennen, sie konnten sie nicht erkennen, wie kann ich dieses Problem lösen oder was richtig laden, um danke

Answer 1

Sobald Sie die Funktion Wrapper hinzufügen:

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

Sie haben neue Bereiche eingeführt, und alle in diesen Funktionen deklarierten var s sind nur innerhalb dieser Funktionen sichtbar. Sie können sie global dieses Problem umgehen, indem sie (dh Eigenschaften von window):

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

oder besser, stellen einen Antrag Namespace:

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

und dann auf die Dinge durch app wie app.manageModel verweisen:

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

Answer 2

Sie könnten auch sehen, wie Sie JS-Dateien modular mit Require.js machen. Funktioniert sehr gut und lädt nur die Ansichten, Modelle und Sammlungen, wenn sie benötigt werden. Dies wird empfohlen, wenn Ihre Anwendung ziemlich groß ist. Es verhindert, dass Sie alle Ihre Skripts beim Laden der Seite laden müssen. Eine schnelle backbone.js-Implementierung wäre wie folgt:

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

Das obige ist ein Sammlungsmodul. Sie können sehen, dass "models/post" auf den Speicherort eines anderen Moduls zeigt. Jquery, Unterstreichung und Backbone wurden in meiner Konfiguration definiert, so dass ich sie nur übergeben muss, anstatt auf ihre tatsächliche Position zu zeigen. Dies ist eine schnelle Einführung, aber wenn Sie Ihre js-Dateien trennen möchten, ist Require.js der Weg.