टॉडएमवीसी को डैप पर लिखना। भाग २

यह ट्यूटोरियल का दूसरा, अंतिम, हिस्सा है जिसमें हम न्यूनतम प्रतिक्रियाशील डीएस जेएस फ्रेमवर्क का उपयोग करके टोडोएमवीसी क्लाइंट लिखते हैं।

पहले भाग का सारांश: हमें JSON प्रारूप में सर्वर से एक टू-डू सूची प्राप्त हुई, इसमें से एक HTML सूची बनाई गई, प्रत्येक मामले के लिए नाम और हस्ताक्षर को पूरा करने की क्षमता को जोड़ा और इन संपादन के बारे में सर्वर की एक अधिसूचना को लागू किया।

यह एहसास होता है: मनमाने मामलों को हटाना, नए मामलों को जोड़ना, बड़े पैमाने पर स्थापना / रीसेट करना और पूरा होने के आधार पर मामलों को छानना और सभी पूर्ण किए गए मामलों को हटाने का कार्य। यही हम करेंगे। क्लाइंट का अंतिम संस्करण, जिसे हम इस लेख में आएंगे, यहां देखा जा सकता है ।



पिछली बार हमने जो विकल्प निपटाया था, उसे यहाँ नया किया जा सकता है ।

यहाँ उसका कोड है:

'#todoapp'.d("" ,'#header'.d("" ,'H1'.d("") ,'INPUT#new-todo placeholder="What needs to be done?" autofocus'.d("") ) ,'#main'.d("" ,'#toggle-all type=checkbox'.d("") ,'UL#todo-list'.d("*@ todos:query" ,'LI'.d("$completed=.completed $editing= $patch=; a!" ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$patch=($completed=#.checked)") ,'LABEL.view' .d("? $editing:!; ! .title") .e("dblclick","$editing=`yes") ,'INPUT.edit' .d("? $editing; !! .title@value") .ui("$patch=(.title=#.value)") .e("blur","$editing=") ,'BUTTON.destroy'.d("") ) .a("!? $completed $editing") .u("? $patch; (@method`PATCH .url:dehttp headers $patch@):query $patch=") ) ) ,'#footer'.d("" ,'#todo-count'.d("") ,'UL#filters'.d("" ,'LI'.d("") ) ,'#clear-completed'.d("") ) ) .DICT({ todos : "//todo-backend-express.herokuapp.com/", headers: {"Content-type":"application/json"} }) .FUNC({ convert:{ dehttp: url=>url.replace(/^https?\:/,'') } }) .RENDER() 

अब यहाँ केवल पचास पंक्तियाँ हैं, लेकिन लेख के अंत तक दो-दो बार होंगे - 100 के रूप में। सर्वर पर कई HTTP अनुरोध होंगे, इसलिए कृपया डेवलपर टूल खोलें (Chrome में, जैसा कि आपको याद है, Ctrl + Shift + I - वहाँ होगा सबसे पहले, नेटवर्क टैब दिलचस्प है, और दूसरी बात, कंसोल। इसके अलावा, हमारे पृष्ठ के प्रत्येक संस्करण के लिए कोड देखना न भूलें - क्रोम में यह Ctrl + U है।

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



ट्यूटोरियल का यह दूसरा भाग पहले की तुलना में थोड़ा अधिक जटिल और दिलचस्प होगा। [TODO: टोकन से इंटरनेट पर मस्तिष्क चित्र विस्फोट करने वाले स्कूली बच्चे को खोजने के लिए कहें] ।

आपकी अनुमति से, मैं भाग 1 के साथ अध्यायों की संख्या जारी रखूंगा। वहाँ हमने 7. की गिनती की,

8. राज्य चर की टू-डू सूची बनाना

सूची से किसी मामले को हटाने के लिए एक बटन है BUTTON.destroy । निष्कासन में सर्वर को एक DELETE अनुरोध भेजने और वास्तव में सभी सामग्रियों के साथ संबंधित UL#todo-list > LI तत्व UL#todo-list > LI से हटाने का समावेश है। DELETE अनुरोध भेजने के साथ, सब कुछ स्पष्ट है:

  ,'BUTTON.destroy'.ui("(@method`DELETE .url:dehttp):query") 

लेकिन स्क्रीन से एक तत्व को हटाने के साथ, विकल्प संभव हैं। कोई बस दूसरे राज्य चर का परिचय दे सकता है, $deleted कह सकता $deleted , और deleted CSS वर्ग सहित सीएसएस के साथ तत्व को छिपा सकता है

  ,'LI'.d("$completed=.completed $editing= $patch= $deleted=; a!" //  $deleted   "" ... ,'BUTTON.destroy'.d("(@method`DELETE .url:dehttp):query $deleted=`yes") //  $deleted -     ) .a("!? $completed $editing $deleted") //   CSS  .deleted{display:none} 

और यह काम करेगा। लेकिन यह धोखा होगा। इसके अलावा, लाइन के नीचे हमारे पास सक्रिय और पूर्ण मामलों के फ़िल्टर और काउंटर होंगे (जो #footer )। इसलिए, ईमानदारी से, "शारीरिक रूप से" सूची से वस्तु को तुरंत हटा देना बेहतर है। यही है, हमें सरणी को स्वयं संशोधित करने की क्षमता की आवश्यकता है, जो हमें शुरू में सर्वर से प्राप्त हुआ था - जिसका अर्थ है कि इस सरणी को भी एक राज्य चर बनना चाहिए। चलो उसे $todos ।

$todos चर का दायरा उन सभी तत्वों के सामान्य पूर्वज का चयन करना है जो इस चर का उपयोग करेंगे। और इसे #header INPUT#new-todo , और #footer काउंटर्स, और वास्तव में UL#todo-list द्वारा एक्सेस किया जाएगा। उन सभी का सामान्य पूर्वज टेम्पलेट का मूल तत्व है, #todoapp । इसलिए, इसके डी-नियम में हम चर $todos को परिभाषित करेंगे। उसी जगह पर, हम तुरंत सर्वर से डेटा अपलोड करते हैं। और UL#todo-list लिस्ट बनाने के लिए, अब हम भी इससे होंगे:

 '#todoapp'.d("$todos=todos:query" //   $todos      ... ,'UL#todo-list'.d("*@ $todos" //     $todos 

यह महत्वपूर्ण है। यदि परीक्षण के दौरान अचानक टू-डू सूची लोड नहीं होती है - यह बहुत संभव है कि किसी ने उन सभी को हटा दिया (यह एक सार्वजनिक सर्वर है, और वहां कुछ भी हो सकता है)।
इस मामले में, कृपया पूर्ण-विशेषताओं वाले उदाहरण पर जाएं और प्रयोग करने के लिए कुछ मामले बनाएं।

हम देखते हैं । यहाँ #todoapp तत्व के नियम में $todos घोषित किया गया है और आवश्यक डेटा के साथ तुरंत आरम्भ किया गया है। सब कुछ काम करने लगता है, लेकिन एक अप्रिय विशेषता सामने आई है। यदि सर्वर लंबे समय तक अनुरोध का जवाब देता है (Chrome आपको इस स्थिति का अनुकरण करने की अनुमति देता है: डेवलपर टूल के नेटवर्क टैब पर, आप धीमे नेटवर्क के अनुकरण के विभिन्न तरीके चुन सकते हैं), तो जब तक अनुरोध पूरा नहीं हो जाता है तब तक हमारा नया संस्करण थोड़ा उदास दिखता है - लेकिन सीएसएस के अलावा कुछ भी नहीं है कलाकृतियों। ऐसी तस्वीर निश्चित रूप से उपयोगकर्ता में उत्साह नहीं जोड़ेगी। हालांकि पिछला संस्करण इससे ग्रस्त नहीं था - जब तक कि पेज पर डेटा प्राप्त नहीं हुआ था, तब तक केवल सूची ही गायब थी, लेकिन अन्य तत्व तुरंत दिखाई दिए, डेटा की प्रतीक्षा किए बिना।

ये रही बात। जैसा कि आपको याद है, :query कनवर्टर अतुल्यकालिक है। यह अतुल्यकालिक इस तथ्य में व्यक्त किया जाता है कि जब तक अनुरोध पूरा नहीं हो जाता है, केवल वर्तमान नियम का निष्पादन अवरुद्ध होता है, अर्थात, तत्व की पीढ़ी, जो वास्तव में, अनुरोधित डेटा (जो तार्किक है) की आवश्यकता है। अन्य तत्वों की पीढ़ी अवरुद्ध नहीं है। इसलिए, जब UL#todo-list ने सर्वर तक पहुंच UL#todo-list , तो केवल इसे अवरुद्ध किया गया था, लेकिन #header नहीं और #footer , जो तुरंत खींचा गया था। अब पूरा #todoapp अनुरोध पूरा होने की प्रतीक्षा कर रहा है।

9. डेटा लोडिंग में देरी

स्थिति को ठीक करने और असमान तत्वों को रोकने से बचने के लिए, हम डेटा के शुरुआती लोडिंग को स्थगित कर देंगे, जब तक कि सब कुछ पहले से ही तैयार न हो जाए। ऐसा करने के लिए, हम तुरंत डेटा को $todos वैरिएबल में लोड नहीं करेंगे, लेकिन पहले हम इसे "कुछ भी नहीं" के साथ शुरू करते हैं

 '#todoapp'.d("$todos=" //   $todos    "" 

इसलिए वह कुछ भी ब्लॉक नहीं करेगी और पूरा खाका तैयार हो जाएगा - भले ही खाली "टू-डू लिस्ट" के साथ। लेकिन अब, एक उबाऊ प्रारंभिक स्क्रीन के साथ, आप एक टू-डू सूची को अपलोड करके $todos को सुरक्षित रूप से संशोधित कर सकते हैं। ऐसा करने के लिए, इस वंश को #todoapp जोड़ें

  ,'loader' .u("$todos=todos:query") //  $todos,       .d("u") //   (u-)    

इस तत्व का एक यू-नियम है जो अवरुद्ध नियम के बिल्कुल समान दिखता है जिसे हमने अस्वीकार कर दिया था, लेकिन एक मौलिक अंतर है।
मैं आपको याद दिलाता हूं कि डी-नियम ( नीचे से ) तत्व पीढ़ी नियम है जिसे तब निष्पादित किया जाता है जब टेम्पलेट ऊपर से नीचे तक बनाया जाता है, माता-पिता से वंशज तक; और यू-नियम ( ऊपर से ) प्रतिक्रिया नियम हैं जो एक ऐसी घटना की प्रतिक्रिया में निष्पादित होते हैं जो नीचे से ऊपर तक , बच्चे से माता-पिता तक पॉप होते हैं।
तो, अगर कुछ ("कुछ भी नहीं" सहित) डी-नियम में एक चर को सौंपा गया है , तो इसका मतलब है कि इस तत्व के दायरे में इसकी घोषणा और आरंभीकरण और इसके वंशज (नेस्टेड गुंजाइश को डीएपी में लागू किया गया है, जैसा कि जेएस में है। )। अप-नियमों में असाइनमेंट का मतलब है कि पहले स्कोप में घोषित चर का संशोधन । डी-नियम में चरों की घोषणा और आरंभन माता-पिता को वंशजों को निर्माण के लिए आवश्यक जानकारी के नीचे पारित करने की अनुमति देता है, और संशोधन माता-पिता को इस जानकारी को अपडेट पास करने की अनुमति देता है और इस प्रकार उन सभी तत्वों का एक उपयुक्त पुनर्गठन शुरू करता है जो इस पर निर्भर करते हैं।

loader तत्व, अपने यू-नियम में #todoapp वंशज होने के #todoapp , $todos चर को संशोधित करता है , इसमें सर्वर से डेटा लोड करता है, जो इस चर के सभी उपभोक्ता तत्वों के स्वत: उत्थान का कारण बनता है (और केवल उन्हें, जो महत्वपूर्ण है!)। एक चर के उपभोक्ता ऐसे तत्व हैं जिनके डी-नियमों में एक चर के रूप में यह चर होता है, अर्थात। जो निर्माण करते समय इस चर (खाते में गुंजाइश को ध्यान में रखते हुए) को पढ़ते हैं ।

अब हमारे पास $todos वैरिएबल का एक उपभोक्ता है - बहुत UL#todo-list , जो, तदनुसार, डेटा लोड करने के बाद फिर से बनाया जाएगा।

  ,'UL#todo-list'.d("*@ $todos" //  ,   $todos 

इसलिए, अब हमारे पास #todoapp में एक टू-डू लिस्ट एक स्टेट वेरिएबल है, जबकि टेम्प्लेट के शुरुआती रेंडरिंग को ब्लॉक नहीं किया गया है।

10. हटाना और जोड़ना-करना

अब हम हर तरह से $todos को संशोधित कर सकते हैं। आइए आइटम को हटाकर शुरू करें। हमारे पास पहले से ही एक बटन-क्रॉस BUTTON.destroy , जो अब तक केवल सर्वर हटाने के अनुरोध भेजता है

  ,'BUTTON.destroy'.ui("(@method`DELETE .url:dehttp):query") 

यह सुनिश्चित करना आवश्यक है कि इसी वस्तु को $todos चर से भी हटा दिया जाए - और चूंकि यह एक संशोधन होगा, UL#todo-list , इस चर के उपभोक्ता के रूप में, स्वचालित रूप से पुनर्निर्माण करेगा, लेकिन हटाए गए तत्व के बिना।

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

 const remove = (arr,tgt)=> arr.filter( obj => obj!=tgt ); 

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

डीएपी नियमों से इस फ़ंक्शन को सुलभ बनाने के लिए, आपको इसे .FUNC अनुभाग में जोड़ना होगा, लेकिन इससे पहले कि यह तय करें कि हम इसे कैसे कॉल करना चाहते हैं। इस मामले में सबसे सरल विकल्प, शायद, इसे कनवर्टर से कॉल करना है, जो { todos, tgt } ऑब्जेक्ट को स्वीकार करता है और फ़िल्टर किए गए सरणी देता है

 .FUNC({ convert:{ dehttp: url => url.replace(/^https?\:/,''), //        remove: x => remove(x.todos,x.tgt) //     } }) 

लेकिन आपको इस फ़ंक्शन को सही रूप से परिभाषित करने से कोई रोक नहीं है। .FUNC (मैंने पहले ही कहा है कि .FUNC वास्तव में एक नियमित JS विधि है, और इसका तर्क एक नियमित JS ऑब्जेक्ट है?)

 .FUNC({ convert:{ dehttp: url => url.replace(/^https?\:/,''), remove: x => x.todos.filter( todo => todo!=x.tgt ) } }) 

अब हम इस कनवर्टर को डीएपी नियमों से एक्सेस कर सकते हैं

  ,'BUTTON.destroy' .ui("$todos=($todos $@tgt):remove (@method`DELETE .url:dehttp):query") 

यहां, हम पहली बार एक ऑब्जेक्ट बनाते हैं कि JS संकेतन में { todos, tgt:$ } मेल खाता है, इसे पास करें :remove .FUNC में वर्णित कनवर्टर को :remove , और फ़िल्टर किए गए परिणाम को $todos में .FUNC :remove , जिससे यह संशोधित हो जाए। यहां $ तत्व का डेटा संदर्भ है , उस व्यापार वस्तु से $todos सरणी है जिस पर टेम्पलेट बनाया गया है। @ प्रतीक के बाद, तर्क का उपनाम इंगित किया गया है। यदि @ अनुपस्थित है, तो तर्क का अपना नाम उपयोग किया जाता है। यह हाल ही में ES6 नवाचार के समान है - संपत्ति आशुलिपि ।

इसी तरह, हम INPUT#new-todo तत्व और POST अनुरोध का उपयोग करके सूची में एक नया मामला जोड़ते हैं

  ,'INPUT#new-todo placeholder="What needs to be done?" autofocus' .ui("$=(#.value@title) (@method`POST todos@url headers $):query $todos=($todos $@tgt):insert #.value=") ... .FUNC({ convert:{ dehttp: url => url.replace(/^https?\:/,''), remove: x => x.todos.filter( todo => todo!=x.tgt ), //     insert: x => x.todos.concat( [x.tgt] ) //     } }) 

INPUT#new-todo तत्व की एक मानक UI ईवेंट ( INPUT तत्वों के लिए, change ईवेंट को मानक dap माना जाता है) की प्रतिक्रिया के नियम में शामिल हैं: इस तत्व के value गुण से उपयोगकर्ता इनपुट पढ़ना, इस मान के रूप में एक स्थानीय $ संदर्भ .title POST विधि का उपयोग करने वाले सर्वर, संदर्भ $ को एक नए तत्व के रूप में जोड़कर $todos सरणी को संशोधित करता है और अंत में INPUT तत्व की value संपत्ति को साफ़ करता है।

यहां, एक युवा पाठक पूछ सकता है: एरे में तत्व जोड़ते समय concat() उपयोग क्यों करें, अगर यह नियमित push() का उपयोग करके किया जा सकता है? एक अनुभवी पाठक तुरंत समझ जाएगा कि क्या बात है, और टिप्पणियों में अपना उत्तर लिखें।

हम देखते हैं कि क्या हुआ। मामलों को सामान्य रूप से जोड़ा जाता है और हटा दिया जाता है, संबंधित अनुरोधों को सर्वर पर सही तरीके से भेजा जाता है (आप इस समय नेटवर्क टैब को खुले रखते हैं, ठीक है?)। लेकिन क्या होगा अगर हम एक नए सिरे से जोड़े गए मामले का नाम या स्थिति बदलना चाहते हैं? समस्या यह है कि इन परिवर्तनों के सर्वर को सूचित करने के लिए, हमें .url आवश्यकता होती है, जो इस व्यवसाय को सर्वर प्रदान करता है। जब हमने व्यवसाय बनाया, .url इसका पता नहीं था। क्रमशः, हम परिवर्तन के लिए सही PATCH अनुरोध नहीं बना सकते।

वास्तव में, मामले के बारे में सभी आवश्यक जानकारी सर्वर के POST अनुरोध की प्रतिक्रिया में निहित है, और यह न केवल उपयोगकर्ता इनपुट से, बल्कि सर्वर की प्रतिक्रिया से एक नई व्यावसायिक वस्तु बनाने के लिए अधिक सही होगा, और सभी प्रदान किए गए के साथ इस वस्तु को $todos जोड़ें। सर्वर जानकारी .url फ़ील्ड सहित

  ,'INPUT#new-todo placeholder="What needs to be done?" autofocus' .ui("$todos=($todos (@method`POST todos@url headers (#.value@title)):query@tgt ):insert #.value=") 

हम देखते हैं - ठीक है, अब सब कुछ सही ढंग से काम कर रहा है। नए सिरे से बनाए गए मामलों को संपादित करने के बारे में सर्वर को सूचनाएं सही जाती हैं।

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

  //    , :query   .ui("$=(#.value@title) (@method`POST todos@url headers $):query $todos=($todos $@tgt):insert #.value=") 

यह डैप में एसिंक्रोनस कन्वर्टर्स को काम करने की एक और विशेषता है: यदि एसिंक्रोनस कनवर्टर के परिणाम का उपयोग नहीं किया जाता है (अर्थात, इसे कुछ भी नहीं सौंपा गया है), तो आप इसके पूरा होने की प्रतीक्षा नहीं कर सकते - और नियम का निष्पादन अवरुद्ध नहीं है। यह अक्सर उपयोगी होता है: आपने देखा होगा कि सूची से मामलों को हटाते समय, वे DELETE अनुरोध के परिणाम की प्रतीक्षा किए बिना, तुरंत स्क्रीन से गायब हो जाते हैं। यह विशेष रूप से ध्यान देने योग्य है यदि आप नेटवर्क पैनल में कई मामलों को जल्दी से हटाते हैं और अनुरोधों को ट्रैक करते हैं।

लेकिन, चूंकि हम POST अनुरोध के परिणाम का उपयोग करते हैं - इसे $ संदर्भ में असाइन करें - हमें इसे पूरा करने के लिए इंतजार करना होगा। इसलिए, आपको POST अनुरोध को निष्पादित करने से पहले $todos को संशोधित करने का एक और तरीका खोजने की आवश्यकता है। समाधान: फिर भी, पहले एक नई व्यावसायिक वस्तु बनाएं और तुरंत इसे $todos जोड़ें, सूची को ड्रा होने दें, और उसके बाद ही, रेंडर करने के बाद, यदि व्यवसाय में .url नहीं है (यानी, व्यवसाय अभी बनाया गया है), एक POST अनुरोध निष्पादित करें, और। इस मामले के डेटा संदर्भ पर अपना परिणाम लागू करें।

इसलिए, पहले हम केवल .title में केवल .title वाले रिक्त को .title

  ,'INPUT#new-todo placeholder="What needs to be done?" autofocus' .ui("$todos=($todos (#.value@title)@tgt):insert #.value=") 

UL#todo-list > LI एलिमेंट जेनरेशन रूल पहले से ही इसमें शामिल a! तत्व को पहली बार खींचने के बाद एक नियम शुरू करना। वहाँ हम .url की अनुपस्थिति में POST अनुरोध के लॉन्च को जोड़ सकते हैं। अतिरिक्त फ़ील्ड्स को संदर्भ में इंजेक्ट करने के लिए, dap का & ऑपरेटर है

  .a("!? $completed $editing; ? .url:!; & (@method`POST todos@url headers $):query") 

हम देखते हैं । एक और बात! धीमे नेटवर्क के साथ भी, टू-डू सूची को तुरंत अपडेट किया जाता है, और सर्वर अधिसूचना और अनुपलब्ध डेटा को लोड करने की पृष्ठभूमि में अद्यतन सूची तैयार करने के बाद होती है।

11. सबको दाव!

#header तत्व में सूची में सभी मामलों को पूरा करने के लिए बड़े पैमाने पर संस्थापन / रीसेट का बटन होता है। सरणी के तत्वों के मानों के बड़े पैमाने पर असाइनमेंट के लिए, हम सिर्फ एक और कन्वर्टर लिखते हैं :assign , और INPUT#toggle-all पर क्लिक करके इसे $todos पर लागू करें

  ,'INPUT#toggle-all type=checkbox' .ui("$todos=($todos (#.checked@completed)@src):assign") ... assign: x => x.todos && x.todos.map(todo => Object.assign(todo,x.src)) 

इस मामले में, हम केवल .completed फ़ील्ड में रुचि रखते हैं, लेकिन यह देखना आसान है कि इस तरह के एक कनवर्टर से आप सरणी तत्वों के किसी भी फ़ील्ड के मूल्यों को बड़े पैमाने पर बदल सकते हैं।
ठीक है, $todos सरणी में $todos स्विच $todos , अब हमें सर्वर को किए गए परिवर्तनों के बारे में सूचित करने की आवश्यकता है। मूल उदाहरण में, यह प्रत्येक मामले के लिए PATCH अनुरोध भेजकर किया जाता है - बहुत प्रभावी रणनीति नहीं है, लेकिन यह अब हम पर निर्भर नहीं करता है। ठीक है, प्रत्येक मामले के लिए हम एक PATCH अनुरोध भेजते हैं

  .ui("*@ $todos=($todos (#.checked@completed)@src):assign; (@method`PATCH .url:dehttp headers (.completed)):query") 

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

12. पूरा होने के आधार पर छानने के मामले

वास्तविक टू-डू सूची के अलावा, आवेदन को पूरा होने और पूर्ण और अपूर्ण कार्यों के काउंटर दिखाने के मामलों द्वारा मामलों को फ़िल्टर करने में भी सक्षम होना चाहिए। बेशक, फ़िल्टर करने के लिए हम JS द्वारा प्रदान की गई उसी filter() पद्धति का उपयोग करने के लिए तुच्छ होंगे।

लेकिन पहले आपको यह सुनिश्चित करने की आवश्यकता है कि प्रत्येक मामले का .completed फ़ील्ड हमेशा सत्य होता है, और जब आप क्लिक करते हैं तो केस का अलग-अलग पंजा $completed चर के साथ अद्यतन किया जाता है। पहले, यह हमारे लिए महत्वपूर्ण नहीं था, लेकिन अब यह होगा।

  ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$patch=(.completed=$completed=#.checked) $recount=()") //  .completed        

यहां महत्वपूर्ण बिंदु यह है कि प्रत्येक मामले का डेटा संदर्भ केस ऑब्जेक्ट ही है, जो $todos सरणी में निहित है। एक प्रति, या संबंधित निर्माण नहीं, बल्कि वस्तु। और सभी फ़ील्ड्स को कॉल करते हैं। .title , .completed url - पढ़ना और लिखना दोनों - इस वस्तु पर सीधे लागू होते हैं। इसलिए, $todos सरणी को सही ढंग से काम करने के लिए छानने के लिए, हमें मामले को पूरा करने की आवश्यकता है न केवल स्क्रीन पर .completed में, बल्कि .completed वस्तु के .completed क्षेत्र में भी परिलक्षित होने के लिए।

केवल पूर्णता के आवश्यक संकेत के साथ मामलों को दिखाने के लिए। सूची में शामिल होने के बाद, हम चयनित फिल्टर के अनुसार $todos .completed को फ़िल्टर करेंगे। चयनित फ़िल्टर है, आपने यह अनुमान लगाया है, हमारे आवेदन का एक और राज्य चर है, और हम इसे कॉल करेंगे: $filter । चयनित $filter अनुसार $todos को फ़िल्टर करने के लिए $filter हम थंबनेल के साथ चलते हैं और केवल { कनवर्टर, फ़ॉर्म } फ़िल्टर की गई सूची में एक और कनवर्टर जोड़ते हैं, और हम "साहचर्य सरणी" (यानी, साधारण JS) से नाम और फ़िल्टरिंग फ़ंक्शन लेंगे। ऑब्जेक्ट) todoFilters

 const todoFilters={ "All": null, "Active": todo => !todo.completed, "Completed": todo => !!todo.completed }; '#todoapp'.d("$todos= $filter=" //   $filter ... ,'UL#todo-list'.d("* ($todos $filter):filter" ... ,'UL#filters'.d("* filter" //  filter      .DICT ,'LI' .d("! .filter") .ui("$filter=.") //    "$filter=.filter" ) ... .DICT({ ... filter: Object.keys(todoFilters) //["All","Active","Completed"] }) .FUNC({ convert:{ ... filter: x =>{ const a = x.todos, f = x.filter && todoFilters[x.filter]; return a&&f ? a.filter(f) : a; } } }) 

हम जांच करते हैं । फिल्टर ठीक से काम करते हैं। इसमें एक बारीकियां है कि फिल्टर के नाम एक साथ प्रदर्शित किए जाते हैं, क्योंकि यहां हमने मूल के DOM संरचना से थोड़ा आगे बढ़कर सीएसएस से बाहर निकल गए। लेकिन हम इस पर थोड़ी देर बाद लौटेंगे।

13. पूर्ण और सक्रिय मामलों के काउंटर।

पूर्ण और सक्रिय मामलों के काउंटरों को दिखाने के लिए, बस उपयुक्त फिल्टर के साथ $todos को फ़िल्टर करें और परिणामी सरणियों की लंबाई दिखाएं

  ,'#footer'.d("$active=($todos @filter`Active):filter $completed=($todos @filter`Completed):filter" ,'#todo-count'.d("! (active $active.length)format") //  length    active ... ,'#clear-completed'.d("! (completed $completed.length)format") ) ... .DICT({ ... active: "{length} items left", completed: "Clear completed items ({length})" }) 

इस रूप में, काउंटर्स बूट समय पर सही मान दिखाते हैं, लेकिन मामलों के पूरा होने के बाद के बदलावों पर प्रतिक्रिया नहीं देते हैं (जब पंजे पर क्लिक करते हैं)। तथ्य यह है कि जैकडॉव्स पर क्लिक करने पर, प्रत्येक अलग-अलग मामले की स्थिति बदल जाती है, $todos की स्थिति में बदलाव नहीं होता है - एक सरणी तत्व का संशोधन स्वयं सरणी का संशोधन नहीं है। इसलिए, हमें मामलों को फिर से पंजीकृत करने की आवश्यकता के बारे में एक अतिरिक्त संकेत की आवश्यकता है। ऐसा संकेत एक अतिरिक्त राज्य चर हो सकता है, जिसे हर बार संशोधित किया जाता है जब पुन: गिनती की आवश्यकता होती है। इसे $recount ।हम डी-नियम में एक सामान्य पूर्वज की घोषणा करेंगे, हम इसे अपडेट करेंगे जब हम डॉव्स पर क्लिक #footerकरेंगे , और हम तत्व को उपभोक्ता बना देंगे - इसके लिए, इसके चर नियम में इस वेरिएबल का उल्लेख करें

 '#todoapp'.d("$todos= $filter= $recount=" //  $recount     ... ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$patch=(.completed=$completed=#.checked) $recount=()") //  $recount    ... ,'#footer'.d("$active=($todos @filter`Active):filter $completed=($todos @filter`Completed):filter $recount" //  $recount 

अब सब कुछ उसी तरह काम करता है जैसे इसे करना चाहिए, काउंटरों को सही तरीके से अपडेट किया जाता है।

14. सभी पूर्ण मामलों का विलोपन।

टोडो एमवीसी में मामलों को हटाने को बैच अनुरोध के रूप में गैर-कोषेर के रूप में कार्यान्वित किया जाता है - कई अनुरोधों द्वारा। ठीक है, चलो एक आह ले लो, हमारे हाथ सिकोड़ें, और प्रत्येक पूर्ण मामले के लिए DELETE- अनुरोध द्वारा निष्पादित करें - और हमारे पास पहले से ही यह सब है $completed। तदनुसार, $todosपूर्ण मामलों को हटाने के बाद, पहले से ही क्या होना चाहिए$active

  ,'#clear-completed' .d("! (completed $completed.length)format") .ui("$todos=$active; *@ $completed; (@method`DELETE .url:dehttp):query") 

हम देखते हैं : हम कुछ अनावश्यक मामले बनाते हैं, उन्हें पंजे के साथ चिह्नित करते हैं और हटाते हैं। नेटवर्क टैब बैच ऑपरेशन के लिए इस दृष्टिकोण का आतंक दिखाएगा।

15. पता बार में स्थिति

फ़िल्टर के चयन पर वापस जाएं। मूल उदाहरण में, चयनित फ़िल्टर # के बाद एड्रेस बार में परिलक्षित होता है। जब मैन्युअल रूप से या नेविगेशन के दौरान पता बार में # -ग्रीमेंट बदल रहा है, तो चयनित फ़िल्टर भी बदल जाता है। यह आपको पहले ही चयनित टू-डू फ़िल्टर के साथ URL द्वारा एप्लिकेशन पृष्ठ पर जाने की अनुमति देता है।

आप एक location.hashऑपरेटर के साथ लिख सकते हैं urlhash, उदाहरण के लिए, किसी तत्व के नियम #todoapp(या उसके किसी वंशज) में, जिसे प्रत्येक अपडेट के साथ निष्पादित किया जाएगा$filter

 .a("urlhash $filter") 

और आप $filterपता बार से एक मान के साथ चर को इनिशियलाइज़ कर सकते हैं और फिर वर्तमान स्थिति (# के बिना) देने वाले छद्म-कनवर्टर का उपयोग करके हैशचेंज घटना से अपडेट कर सकते हैं।:urlhashlocation.hash

 .d("$todos= $filter=:urlhash $recount=" .e("hashchange","$filter=:urlhash") 

हैशचेंज घटना को ब्राउज़र द्वारा उठाया जाता है जब पता बार में # -agagment बदल जाता है। हालांकि, किसी कारण के लिए केवल window, और document.bodyइस घटना को सुन सकते हैं। इस घटना को एक तत्व से ट्रैक करने के लिए #todoapp, आपको एक ऑपरेटर को उसके डी-नियम में जोड़ना होगा जो listenऑब्जेक्ट से ऑब्जेक्ट को रिले करने के लिए तत्व पर हस्ताक्षर करता है।window

 '#todoapp' .a("urlhash $filter") .e("hashchange","$filter=:urlhash") .d("$todos= $filter=:urlhash $recount=; listen @hashchange" 

हम देखते हैं : स्विच बार, पता बार में परिवर्तन ट्रैक करें , #Active , #All , #Completed के साथ लिंक का पालन करें । सब कुछ काम करता है। लेकिन वापस मूल में। वहाँ, ऐसा लगता है, फिल्टर का विकल्प लागू किया गया है - लिंक पर क्लिक करके। यद्यपि बहुत व्यावहारिक नहीं है, हम पूर्णता के लिए ऐसा ही करेंगे।

  ,'UL#filters'.d("* filter" ,'LI'.d("" ,'A'.d("!! (`# .filter)concat@href .filter@") ) ) 

, !? , CSS- selected , .filter $filter

  ,'A'.d("!! (`# .filter)concat@href .filter@; !? (.filter $filter)eq@selected") 

dap- ( ) , .

16.

, , head HTML-

  [ui=click]{cursor:pointer} 

तो कम से कम हम देखेंगे कि आप कहां क्लिक कर सकते हैं।

अरे हाँ! यह बड़े अक्षरों में "टॉडोस" शब्द लिखने के लिए बना हुआ है। लेकिन यहाँ मैं, शायद, अपने आप को अंततः एक छोटी कल्पना और रचनात्मकता दिखाने की अनुमति दूंगा, और सिर्फ "टॉड" के बजाय मैं "डीएपी टॉडोस" लिखूंगा

  ,'H1'.d("","dap todos") 

वाह। अब हमारे आवेदन को पूर्ण माना जा सकता है, और आयोजित ट्यूटोरियल (यदि आप ईमानदारी से इन पंक्तियों को पढ़ते हैं)।

निष्कर्ष में

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

पूछो, जैसा वे कहते हैं, सवाल।