JSON फ़ाइल से बैकबोन संग्रह में डेटा लोड करें?

Question

में एक स्थानीय JSON फ़ाइल से एक रीढ़ संग्रह में कुछ डेटा लोड करने के लिए यह बहुत ही बुनियादी कोड का उपयोग कर कोशिश कर रहा हूँ:

window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.fetch({ url: "/init.json"}); 
    console.log('AllStudents', AllStudents); 

सांत्वना बयान में AllStudents खाली है। लेकिन init.json निश्चित रूप से लोड किया जा रहा है। ऐसा लगता है:

[ 
    { text: "Amy", grade: 5 }, 
    { text: "Angeline", grade: 26 }, 
    { text: "Anna", grade: 55 }  
] 

मैं क्या गलत कर रहा हूं?

अद्यतन: मैं भी .fetch() कॉल के ऊपर एक reset श्रोता जोड़ने की कोशिश की है, लेकिन वह फायरिंग नहीं कर रहा है या तो:

AllStudents.bind("reset", function() { 
    alert('hello world'); 
}); 
AllStudents.fetch({ url: "/init.json"}); 

कोई चेतावनी दिखाई देता है।

अद्यतन 2:

$(function(){ 
    window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.url = "/init.json"; 
    AllStudents.bind('reset', function() { 
     console.log('hello world'); 
    }); 
    AllStudents.fetch(); 
    AllStudents.fetch({ url: "/init.json", success: function() { 
     console.log(AllStudents); 
    }}); 
    AllStudents.fetch({ url: "/init.json" }).complete(function() { 
     console.log(AllStudents); 
    }); 
}); 

केवल एक सांत्वना बयान भी तीसरे fetch() कॉल में प्रकट होता है, है, और यह एक खाली वस्तु है: इस स्क्रिप्ट (पूरा यहाँ reproduced) की कोशिश कर रहा।

अब मैं बिल्कुल परेशान हूं। मैं क्या गलत कर रहा हूं?

JSON फ़ाइल को एप्लिकेशन/जेसन के रूप में सेवा दी जा रही है, इसलिए इसका कोई लेना-देना नहीं है।

Answer 1

मैं तुम्हें लाने के विकल्प के लिए {add:true},

जोड़ने के लिए यदि आप एक चर करने के लिए लाने सौंपा जरूरत है, तो आप परिणाम के रूप में अच्छी तरह से, मिलेगा लेकिन फिर इसकी नहीं संग्रह के अंदर आप

चाहता था लगता है

Answer 2

जावास्क्रिप्ट में I/O संचालन लगभग हमेशा असीमित होते हैं, और इसलिए यह बैकबोन के साथ भी है। इसका मतलब है कि सिर्फ इसलिए कि AllStudents.fetch वापस आ गया है, इसने अभी तक डेटा नहीं लिया है। तो जब आप अपना console.log कथन दबाते हैं, तो संसाधन अभी तक नहीं लाए गए हैं। या

AllStudents.fetch({ url: "/init.json", success: function() { 
    console.log(AllStudents); 
}}); 

वैकल्पिक रूप से, jQuery में नए वादा सुविधा का उपयोग (fetch एक वादा वापस आ जाएगी):: आप fetch को एक कॉलबैक पास करना चाहिए)

AllStudents.fetch({ url: "/init.json" }).complete(function() { 
    console.log(AllStudents); 
}); 

Answer 3

लाने (के रूप में एक 'सफलता' अधिसूचना रिटर्न पहले ही कहा गया है, लेकिन इसका मतलब है कि सर्वर अनुरोध सफल रहा था। fetch() कुछ JSON वापस लाया, लेकिन यह अभी भी इसे संग्रह में सामान की जरूरत है।

संग्रह सामग्री को अद्यतन होने पर 'रीसेट' ईवेंट को सक्रिय करता है। यही वह समय है जब संग्रह उपयोग करने के लिए तैयार है ...

AllStudents.bind('reset', function() { alert('AllStudents bind event fired.'); }); 

ऐसा लगता है कि आपके पास यह आपके पहले अपडेट में था। एकमात्र चीज जो मैंने अलग-अलग की थी वह ईवेंट बाध्यकारी के सामने लाने() को रखना था।

Answer 4

आपकी JSON फ़ाइल में विशेषता नाम और गैर-संख्यात्मक विशेषता मान डबल उद्धृत ("") होना चाहिए। सिंगल कोट्स या नो-कोट्स त्रुटियों का उत्पादन करते हैं और प्रतिक्रिया ऑब्जेक्ट नहीं बनाया जाता है जिसका उपयोग मॉडल बनाने और संग्रह को पॉप्युलेट करने के लिए किया जा सकता है।

तो। यदि आप जेसन फ़ाइल सामग्री को

[ 
    { "text": "Amy", grade: 5 }, 
    { "text": "Angeline", grade: 26 }, 
    { "text": "Anna", grade: 55 }  
] 

आपको गैर-खाली संग्रह ऑब्जेक्ट देखना चाहिए।

आप नीचे दिए गए के रूप में दोनों सफलता और विफलता को देखने के लिए अपने कोड बदल सकते हैं:

AllStudents.fetch({ 
    url: "/init.json", 
    success: function() { 
      console.log("JSON file load was successful", AllStudents); 
     }, 
    error: function(){ 
     console.log('There was some error in loading and processing the JSON file'); 
    } 
    }); 

अधिक जानकारी के लिए, शायद यह एक अच्छा विचार जिस तरह से ajax प्रतिक्रिया ऑब्जेक्ट का निर्माण होगा करने के लिए देखने के लिए किया जाएगा।