नॉकआउट में एसिंक्रोनस पैटर्न। JS

नॉकआउट.जेएस जटिल वेब एप्लिकेशन बनाने के लिए एक अच्छी लाइब्रेरी है। लंबे समय तक मेरे पास टेम्पलेट्स के अतुल्यकालिक तंत्र का अभाव था। मैं इसे तब तक लागू नहीं कर सकता जब तक मुझे पता नहीं चल गया कि window.setTimeout अपने कॉलबैक को वर्तमान संदर्भ के अंत से पहले नहीं कहता है। यानी कोड में

setTimeout("console.log(window.Value)",0),(function (){while (Math.random() < 0.9999999);window.Value = 1;})() 

कंसोल के लिए आउटपुट केवल एक संख्या के बहुत करीब से यादृच्छिक रूप से खोज करने के लंबे फ़ंक्शन के पूरा होने के बाद होगा।
नॉकआउट के लिए एक लेख। जो बाध्यकारी तंत्र में पारंगत हैं और customBindings लिखने में सक्षम हैं।

इसलिए, सेटटाइमआउट (कॉलबैक, 0) के व्यवहार को जानते हुए , कार्यान्वयन बहुत सरल है।
कस्टम-बाध्यकारी कोड:

 ko.bindingHandlers['asynctemplate'] = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { $(element).empty(); var template = ko.utils.unwrapObservable(valueAccessor()); if (!template) return; setTimeout(function() { $.ajax({ url: template }).done(function(result){ var view = $(result).appendTo(element)[0]; ko.applyBindings(bindingContext.$data, view); }); }, 0); } } 

आवेदन:

 //     <div data-bind="asynctemplate: '/Templates/Controls/Components/Modal.html'"></div> //     <div data-bind="asynctemplate: templatePath"></div> //    with  foreach <div data-bind="asynctemplate: templatePath, with: templateViewModel">!!</div> 

शून्य टाइमआउट के बिना, समस्याएं होंगी: यदि टेम्पलेट प्राप्त करने में कम समय लगता है, तो टेम्पलेट को DOM ट्री में डाला जा सकता है, नॉकआउट बंधन तंत्र से संबंधित तत्व तक पहुंचने से पहले। इस मामले में, बंधन दो बार होगा, जो कुछ भी अच्छा नहीं है।

इस समस्या को दूसरे तरीके से हल किया जा सकता है: एक अवलोकन क्षेत्र टेम्पलेट बनाएं, जिसमें "लोडिंग ..." जैसे प्लग को पहले रखा गया है, और जब सर्वर से प्रतिक्रिया मिलती है, तो टेम्पलेट स्वयं लोड होती है। लेकिन यह इंटरफ़ेस में एक पलक को उकसाता है: एक लोड संकेत आधे सेकंड के लिए दिखाई देता है।

अगर किसी को दिलचस्पी है, तो मैं asynctemplate बाइंडिंग के लिए टेम्पलेट कैशिंग और समर्थन को एक साथ जोड़ सकता हूं और foreach के साथ।

UPD: जैसा कि xducer ने टिप्पणियों में बताया है , सब कुछ बहुत सरल है। नॉकआउट। जेएस प्रलेखन का एक सरल तरीका है: कस्टम-बाइंडिंग में इनिट जोड़ें:

 ko.bindingHandlers['asynctemplate'] = { init: function () { return { controlsDescendantBindings: true }; }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { $(element).empty(); var template = ko.utils.unwrapObservable(valueAccessor()); if (!template) return; $.ajax({ url: template }).done(function (result) { $(result).appendTo(element); ko.applyBindingsToDescendants(bindingContext, element); }); } } 

टेम्पलेट को बांधते समय फिक्स्ड बग: प्रारंभिक संस्करण में, बंधन केवल पहले तत्व पर हुआ।