गतिशील रूप से टेम्प्लेट जोड़ने और हटाने के दौरान नॉकआउटज अनुकूलन

मैं आपको तुरंत चेतावनी देता हूं कि लेख केवल उन लोगों के लिए है जो उपयोग करते हैं या नॉकआउट का उपयोग करने जा रहे हैं। यह माना जाता है कि पाठक पहले से ही जानता है कि यह क्या है और इसके लिए क्या है ।

मेरी एक परियोजना में, मैंने नॉकआउट.जेएस का उपयोग करने का निर्णय लिया। सब कुछ अच्छा और भी अद्भुत था, जबकि गणना के तरीकों के लिए बहुत कम डेटा और कॉल संसाधन गहन नहीं थे। लेकिन फिर डेटा अधिक से अधिक हो गया और गणना दिखाई दी जो आंख के लिए ध्यान देने योग्य समय लेती है। इस समस्या को हल करने की कोशिश करते हुए, मैंने पृष्ठ को टैब में विभाजित किया। एक अलग टैब पर जाकर, मैंने टेम्प्लेट को बदल दिया और इस तरह तार्किक रूप से उम्मीद की कि किसी भी अवलोकन योग्य मूल्य में परिवर्तन होने पर गणना मूल्यों की गणना में कमी आएगी। लेकिन वहाँ यह था। यह पता चला कि रूपरेखा की विशेषता ऐसी है कि मूल्यों की पुनर्गणना तब भी होती है जब टेम्पलेट पूरी तरह से मॉडल हाउस से हटा दिया जाता है।


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

<input data-bind="value:symbols" /> <div data-bind="text:symbolsLength"></div> 

 var vm={ symbols:ko.observable(''), }; vm.symbolsLength=ko.computed(function(){ return vm.symbols().length; }) ko.applyBindings(vm); 

यहां सब कुछ सरल है और यह काम करता है: jsfiddle

अब उदाहरण को थोड़ा बदलते हैं। हम गणना किए गए मान को टेम्पलेट में स्थानांतरित करते हैं और एक और टेम्पलेट जोड़ते हैं जिसमें स्थिर HTML होगा। और हम एक बटन बनाएंगे, जिस पर क्लिक करके टेम्प्लेट स्विच हो जाएंगे। मैं उम्मीद करता हूं (या बल्कि, मैं यह चाहूंगा) कि प्रतीकों का मूल्य गणना नहीं किया जाएगा जब यह मूल्य आउटपुट नहीं होगा। इसलिए, इसे सत्यापित करने के लिए, मैं गणना फ़ंक्शन में एक अलर्ट डालूंगा।

 <script id="template1"> <div data-bind="text:symbolsLength"></div> </script> <script id="template2"> static html </script> <input data-bind="value:symbols, valueUpdate: 'afterkeydown'" /> <button data-bind="click:click">Change Template</button> <div data-bind="template:templateName"></div> 

 var vm={ symbols:ko.observable(''), templateName:ko.observable('template1'), click:function(){ vm.templateName( (vm.templateName()=='template1')? 'template2': 'template1' ); } }; vm.symbolsLength=ko.computed(function(){ alert(1); return vm.symbols().length; }) ko.applyBindings(vm); 

अब एक उदाहरण देखते हैं और महसूस करते हैं कि क्या हुआ। प्रतीकों की गणना करते समय रूपरेखा ने प्रदर्शन किया। इस प्रकार, उसे पता चला कि यह मूल्य किन वस्तुओं पर निर्भर करता है। इस मामले में, प्रतीकों वस्तु को प्रतीकों की गणना के कार्य में कहा गया था। अगली बार जब आप प्रतीकों को बदलते हैं, तो नॉकआउट प्रतीकों की पुनरावृत्ति करेगा। यही है, जब हम इनपुट फ़ील्ड में मूल्य बदलते हैं, तो गणना फ़ंक्शन प्रतीकों लैंथेन्थ को कहा जाता है, जो अलर्ट द्वारा पुष्टि की जाती है।
इसके अलावा, ध्यान दें कि अलर्ट पॉप अप होता है, भले ही हम "चेंज टेम्प्लेट" बटन के साथ एक अलग टेम्पलेट पर स्विच करते हैं।

तो, दो समस्याएं उत्पन्न होती हैं:
1. गणना किए गए मूल्यों की गणना को हमेशा आरंभीकरण के दौरान कहा जाता है, भले ही इस मूल्य का उपयोग कहीं और न किया गया हो
2. उस टेम्पलेट को हटाने के बाद भी जिसमें गणना मूल्य का उपयोग DOM से किया गया था, गणना तब भी होती है जब निर्भर मूल्य बदल जाता है।

पहली समस्या बहुत सरलता से हल हो जाती है। ऐसा करने के लिए, स्थगित करें: ko.computed फ़ंक्शन के सच्चे पैरामीटर:

 vm.symbolsLength=ko.computed({ read:function(){ alert(1); return vm.symbols().length; }, deferEvaluation:true }) 

अब SymbolLength की गणना इसके पहले उपयोग के बाद ही होगी, यानी DOM1 के टेम्पलेट 1 टेम्पलेट को जोड़ने के बाद। लेकिन दूसरी समस्या बनी हुई है। प्रतीकों वस्तु को बदलने के लिए पहले से ही प्रतीकों की गति का उपयोग किया गया है, और भले ही प्रतीकों का उपयोग कहीं भी नहीं किया गया हो, गणना अभी भी होगी।
आंतरिक आवाज आपको बताती है कि किसी भी तरह से प्रतीकों की वस्तु को प्रतीकों वस्तु में परिवर्तन से हटाने की आवश्यकता होती है।
लेकिन यह कैसे करें? और दूसरा सवाल: किस बिंदु पर?
मुझे इन सवालों के जवाब मिल गए और बाद में उनके बारे में और बात करूंगा। शायद एक सरल विकल्प है, जिसे मैं टिप्पणियों में जानना चाहता हूं।

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

दूसरे प्रश्न का उत्तर: यह मूल्य की अगली गणना के दौरान किया जा सकता है, जब गणना परिणाम के लिए अधिक ग्राहक नहीं होते हैं। इस स्थिति में, SymLength की गणना करने के लिए सब्सक्राइबर टेम्पलेट 1 टेम्पलेट में इस मूल्य को आउटपुट करने का कार्य करता है।

ग्राहकों की संख्या और निर्भरता की संख्या निर्धारित करने के लिए, नॉकआउट में वस्तुओं के दो कार्य हैं:
getSubscosCount ()
getD डिपेंडेंसीज ()

इन कार्यों द्वारा लौटाए गए मूल्यों की निगरानी के क्रम में, निम्नलिखित नियमितता प्रकट की गई थी:
1. पहली गणना में, दोनों फ़ंक्शन शून्य पर लौटते हैं। इस मामले में हम कुछ नहीं करते हैं
2. निम्नलिखित गणनाओं में, ये दो कार्य वास्तविक मान लौटाते हैं। इस मामले में, परिभाषा द्वारा निर्भरता की संख्या शून्य से अधिक होगी, क्योंकि प्रतीकों पर निर्भरता प्रतीकों पर निर्भर करती है। लेकिन हम ऐसी स्थिति में रुचि रखते हैं जहां ग्राहकों की संख्या शून्य है।
वर्णित दो बिंदुओं को देखते हुए, आप उस क्षण की गणना कर सकते हैं जब आपको ऑब्जेक्ट को फिर से बनाने की आवश्यकता होती है।

तो, सैद्धांतिक भाग हल हो गया है। हम व्यावहारिक कार्यान्वयन के लिए जाते हैं।
ऐसा करने के लिए, एक फ़ंक्शन बनाएं जो ko.computed को प्रतिस्थापित करता है। इसे ko.recompute कहें:

  ko.recompute=function(callback){ var rez=function(){ return rez.val(); }; rez.__ko_proto__=ko.observable; var o={ deferEvaluation:true, read:function(){ var s=rez.val.getSubscriptionsCount()==0; var d=rez.val.getDependenciesCount()==0; if(s!=d) { setTimeout(function(){ rez.val.dispose(); rez.val=ko.computed(o); },1); return null; } return callback(); } }; rez.val=ko.computed(o); return rez; }; 

अब हमारा उदाहरण इस तरह दिखेगा:

 var vm={ symbols:ko.observable(''), templateName:ko.observable('template1'), click:function(){ vm.templateName( (vm.templateName()=='template1')? 'template2': 'template1' ); } }; vm.symbolsLength=ko.recompute(function(){ alert(1); return vm.symbols().length; }) ko.applyBindings(vm); 

इस प्रकार, प्रतीकों की गणना दो मामलों में घटित होगी:
1. जब आपको प्रतीकों के मूल्य को प्रदर्शित करने की आवश्यकता होती है
2. जब प्रतीकों का मान प्रदर्शित होता है, लेकिन प्रतीकों का मूल्य बदल गया है
और निश्चित रूप से परिणाम: jsfiddle

लेकिन k.recompute फ़ंक्शन का अधिक सही संस्करण xducer द्वारा सुझाया गया था:

 ko.recompute=function(callback){ var c; function create(){ c = ko.computed({ read: callback, deferEvaluation:true, disposeWhen:function(){ return (c.getSubscriptionsCount()==0)&& setTimeout(create,0); } }); } create(); function read(){ return c(); } read.__ko_proto__=ko.observable; return read; }; 

यहां विशेष पैरामीटर डिस्पोजेन का उपयोग किया जाता है। इस प्रकार, चेक गणना फ़ंक्शन में नहीं, बल्कि उसके सामने होगा।