Backbone.js: विभिन्न जेएस फ़ाइल में दृश्य, संग्रह, मॉडल को अलग करें, वे एक-दूसरे को

Question

पहचान नहीं सकते थे। मैं वेब ऐप बनाने के लिए बैकबोन.जेएस का उपयोग करता हूं, सभी दृश्य, संग्रह और मॉडल एक जेएस फ़ाइल में लिखता है, यह सफलता! 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> 

और लोड मॉडल कोड:

अब मैं, विभिन्न js फ़ाइलों के लिए उन्हें अलग तरह ही चाहते

$(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 एस केवल उन कार्यों के भीतर दिखाई दे रहे हैं। ,

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

या बेहतर एक आवेदन नाम स्थान का परिचय:: आप उन वैश्विक (यानी window के गुणों) बनाकर इस पर प्राप्त कर सकते हैं

$(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 का उपयोग करके जेएस फाइल मॉड्यूलर बनाने के लिए भी देख सकते हैं। बहुत अच्छी तरह से काम करता है और जब आवश्यक हो तो दृश्य, मॉडल और संग्रह लोड कर देगा। यदि आपका आवेदन काफी बड़ा है तो यह अनुशंसा की जाती है। यह आपको पेज लोड पर अपनी सभी स्क्रिप्ट लोड करने से रोक देगा। एक त्वरित 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; 
}); 

उपर्युक्त संग्रह संग्रह मॉड्यूल है। आप 'मॉडल/पोस्ट' देख सकते हैं जो किसी अन्य मॉड्यूल के स्थान पर इंगित कर रहा है। jquery, अंडरस्कोर, और रीढ़ की हड्डी को मेरी कॉन्फ़िगरेशन में परिभाषित किया गया था, इसलिए मुझे उन्हें अपने वास्तविक स्थान की ओर इशारा करने के विरोध में उन्हें पास करना होगा। यह एक त्वरित परिचय है, लेकिन यदि आप अपनी जेएस फाइलों को अलग करना चाहते हैं, तो Require.js रास्ता है।