2012-08-28 15 views
24

मैं बैकबोन.जेएस के लिए थोड़ा नया हूं, लेकिन मेरे लिए यह सब कुछ कर सकता है, और अब पैटर्न और सर्वोत्तम प्रथाओं को सीखने की कोशिश कर रहा हूं।एकाधिक Backbone.js fetches को सिंक्रनाइज़ करने के लिए कैसे?

var CollA = Backbone.Collection.extend({ 
    model: ModelA, 
    url: '/urlA' 
}); 

var CollB = Backbone.Collection.extend({ 
    model: ModelB, 
    url: '/urlB' 
}); 

var collA = new CollA; 
var collB = new CollB; 

जब मेरे एप्लिकेशन को लोड करने, मैं सर्वर से इन संग्रहों के दोनों लाने, और जब यह गारंटी है कि दोनों फ़ेच पूरा कर लिया है कुछ बूटस्ट्रैप कोड चलाने की आवश्यकता:

मैं दो संग्रह है।

यहाँ कैसे मैं इसे अभी के लिए किया था है:

collA.fetch({success: function() { 
    collB.fetch({success: function() { 
     // run the needed code here. 
    }}); 
}}); 

यह काम करता है, जरूरत कोड दोनों को सफलतापूर्वक पूरा करने के बाद ही हासिल करेगा चलाने के लिए गारंटी है। हालांकि यह स्पष्ट रूप से अक्षम है, क्योंकि fetches क्रमशः चलते हैं, एक के बाद एक।

ऐसा करने के लिए बेहतर पैटर्न क्या होगा, समानांतर में fetches चलाने के लिए और फिर दोनों निष्कर्ष सफलतापूर्वक पूरा हो जाने के बाद कुछ कोड चलाएं?

उत्तर

50

आप jQuery का उपयोग कर रहे हैं, तो when का उपयोग करें:

$.when(collA.fetch(),collB.fetch()).done(function(){ 
    //success code here. 
}); 

पृष्ठभूमि:

आप $.when लिए एक या अधिक deferreds में गुजरती हैं। ऐसा इसलिए होता है कि "jqXHR" संग्रह संग्रह वापस वादा/डिफरर्ड इंटरफ़ेस लागू करता है जिसे $.when का उपयोग करके एक नए वादे में जोड़ा जा सकता है। अनुरोध अनिवार्य रूप से समवर्ती (अच्छी तरह से, जितना जावास्क्रिप्ट अनुमति देता है) और .done पर फ़ंक्शन निष्पादित होगा जब दोनों fetches सफल होते हैं।

+0

धन्यवाद। सभी महान जवाब हैं, यह अंडरस्कोर संस्करण की तुलना में मुझे अधिक सौंदर्यपूर्ण रूप से प्रसन्नता महसूस करता है। और हां, पूरी लोड रणनीति का पुनर्गठन भी बैकबोन इस मामले में सिफारिश करता है। लेकिन कभी-कभी कई समांतर fetches और syncing उचित चीज हैं और यह बहुत अच्छा काम करता है।अंडरस्कोर के लिए – Jaanus

2

मुझे @ जेसीसी का जवाब पसंद है यदि आपको प्रत्येक संग्रह को व्यक्तिगत रूप से प्राप्त करना है। आप तर्क दे सकते हैं कि एकाधिक fetches के विपरीत सर्वर के लिए एक ही fetch बेहतर होगा। यदि आप इस डेटा को एप्लिकेशन लोड पर ला रहे हैं, तो मैं सर्वर पर एक ही कॉल करूंगा और फिर डेटा को आपके प्रासंगिक संग्रह में पास कर दूंगा। यह वास्तव में इस बात पर निर्भर करता है कि एप्लिकेशन लोड पर आपको कितने संग्रह प्राप्त करना है, लेकिन मैं ईमानदारी से सर्वर पर एक कॉल करना पसंद करता हूं और फिर मेरे प्रासंगिक संग्रह में डेटा पास करता हूं।

$.ajax({ 
    url: "path/to/app-load-data" 
}).done(function(data) { 
    collA = new CollA(data.collA); 
    collB = new CollB(data.collB); 
}); 

यह स्पष्ट रूप से निर्भर करेगा कि आप अपने एपीआई में हेरफेर कर सकते हैं और उपर्युक्त आरईएसटी का पालन नहीं करता है। लेकिन फिर आप कई कॉल के विरोध में सर्वर पर एक कॉल कर रहे हैं।

28

जैसा कि @JayC ने कहा है कि आप jQuery से $.when का उपयोग कर सकते हैं, अन्य विकल्प जो मैं पसंद करता हूं after फ़ंक्शन (अंडरस्कोर से) है, जो अपेक्षित कॉल पूरा होने के बाद एक बार निष्पादित होता है।

http://underscorejs.org/#after

function runMyApp(){ 
    // run the needed code here. 
    console.log('This will run one time but until both fetch are being completed.'); 
} 

//2 because you have two collections 
var renderApp = _.after(2, runMyApp); 
collA.fetch({success: renderApp}); 
collB.fetch({success: renderApp}); 
+1

+1। क्या एक महान छोटी पुस्तकालय! – swatkins

+2

उस आसान छोटे समारोह के बारे में कभी नहीं पता था ...! +1। – TYRONEMICHAEL

+0

अच्छा, यह बहुत उपयोगी है! – gustavohenke