कोणीय दो-तरफ़ा बंधन, थोड़ी और समझ

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

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

Angular2 + में, रचनाकारों ने अंतर्निहित दो-तरफ़ा डेटा बाइंडिंग को छोड़ दिया (ngModel को छोड़कर)। लेकिन इसका मतलब यह नहीं है कि हम अपने स्वयं के निर्देशों में दो-तरफ़ा बाध्यकारी का उपयोग नहीं कर सकते हैं ... यह सिर्फ इतना है कि फ़्रीबी खत्म हो गई है और अब हमें अपने दम पर कुछ करने की आवश्यकता है। और, अधिमानतः, यह समझने के साथ कि यह कोणीय में कैसे काम करता है।

सामग्री की तालिका

• संक्षेप में दो-तरफ़ा बंधन
• एनमॉडेल को समझना
• अपना खुद का दो-तरफ़ा डेटा बाइंडिंग बनाएँ
• निष्कर्ष

संक्षेप में दो-तरफ़ा बंधन

A2 + में, केवल एक ही निर्देश दो-तरफ़ा डेटा बाइंडिंग को लागू करता है: ngModel । और पहली नज़र में, यह एंगुलरजेएस (केवल एक अलग संकेतन में) के समान ही जादू है। लेकिन हुड के नीचे क्या है?

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

और तुरंत एक उदाहरण:

<input [(ngModel)]="username"> <p>Hello {{username}}!</p> 

हां, हां, यह 2009 से एक सुंदर और अद्भुत Angular2 डेमो है। कोई मजाक नहीं, सुंदर। फ़ील्ड बदलते समय, उपयोगकर्ता नाम मॉडल में गिरता है, और फॉर्म पर स्वागत संदेश में तुरंत परिलक्षित होता है।

लेकिन यह कैसे काम करता है? याद रखें कि Angular2 में दो-तरफ़ा बाइंडिंग संपत्ति बाइंडिंग और ईवेंट बाइंडिंग है। और हाँ, वे एक साथ एक निर्देशन में उपलब्ध हो सकते हैं। इसके अलावा, ngModel के बिना भी, हम आसानी से दो-तरफ़ा डेटा बाइंडिंग लागू कर सकते हैं। उदाहरण के लिए, इस तरह:

 <input [value]="username" (input)="username = $event.target.value"> <p>Hello {{username}}!</p> 

आउटपुट {{उपयोगकर्ता नाम}} स्पष्ट है, लेकिन इनपुट में वहां क्या लिखा है? आइए समझते हैं:

• [मान] = "उपयोगकर्ता नाम" - वर्ग कोष्ठक के साथ संकेतन, मूल्य संपत्ति के साथ उपयोगकर्ता नाम अभिव्यक्ति को जोड़ता है
• (इनपुट) = "एक्सप्रेशन" - कोष्ठक के साथ एक संकेतन, एक्सप्रेशन इनपुट इवेंट से जुड़ा है (हाँ, ऐसी कोई घटना है)। हमारे मामले में:
  
  • उपयोगकर्ता नाम = $ event.target.value - इस घटना को इनपुट ईवेंट के जवाब में निष्पादित किया जाएगा
  • $ घटना कोणीय घटनाओं में एक सिंथेटिक चर है जो एक पेलोड वहन करती है: इस मामले में, इसमें क्या हुआ और इसके आसपास की जानकारी शामिल है

क्या यह साफ हो रहा है? हम इसे ठीक करते हैं।

हम एंगुलर मॉडल की यूज़र प्रॉपर्टी को ब्राउज़र इनपुट एलिमेंट की वैल्यू प्रॉपर्टी (मॉडल से देखने के लिए वन-वे बाइंडिंग) से बांधते हैं।

हम अपने तत्व की इनपुट घटना के लिए एक अभिव्यक्ति भी बांधते हैं। जो मॉडल के उपयोगकर्ता नाम प्रॉपर्टी के लिए $ event.target.value का मान प्रदान करता है।

$ Event.target.value क्या है? जैसा कि पहले ही उल्लेख किया गया है, $ घटना के बारे में विभिन्न उपयोगी जानकारी से भरा है। इस मामले में, यह एक InputEventObject है जिसमें लक्षित संपत्ति DOM तत्व को संदर्भित करती है जिसने घटना को ट्रिगर किया (यानी हमारे इनपुट तत्व)।

इसलिए, जब हम अनिवार्य रूप से करते हैं, तो इनपुट तत्व ( $ event.target ) की सामग्री ( मूल्य ) को पढ़ा जाता है जब उपयोगकर्ता एक मूल्य दर्ज करता है। और जब हम यह उपयोगकर्ता नाम मान असाइन करते हैं, तो दृश्य डेटा मॉडल में भेजा जाएगा।

वह सब है। यह "संक्षेप में दो-तरफ़ा बंधन है । " सौंदर्य?

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

एनमॉडेल को समझना

यदि आप स्रोत को देखते हैं, तो आप यह सुनिश्चित कर सकते हैं कि ngModel में संपत्ति और घटना के लिए एक बंधन भी है। यहाँ हमारा ngModel उदाहरण कैसा दिखता है, लेकिन शॉर्टहैंड सिंटैक्स का उपयोग किए बिना:

 <input [ngModel]="username" (ngModelChange)="username = $event"> <p>Hello {{username}}!</p> 

लगभग सब कुछ एक जैसा है। [NgModel] संपत्ति के बाइंडिंग इनपुट तत्व के मूल्य को अद्यतन करने का ख्याल रखता है। एक ईवेंट बाइंडिंग (ngModelChange) दुनिया को सूचित करता है कि DOM में परिवर्तन हो रहे हैं।

और आपने देखा कि हैंडलर अभिव्यक्ति केवल $ घटना का उपयोग करती है, न कि $ event.target.value की । क्या यहाँ कुछ गड़बड़ है? बिलकुल नहीं। जैसा कि ऊपर कहा गया है, $ घटना एक सिंथेटिक चर है जो एक पेलोड वहन करती है। जो चीज उपयोगी मानी जाती है उसका निर्णय अंगुलर द्वारा लिया जाता है। दूसरे शब्दों में, ngModelChange आंतरिक $ घटना से target.value निकालने का ध्यान रखता है और बस हमें वह देता है जो हम चाहते हैं, बिना पैकेजिंग और टैम्बोरिन के। तकनीकी रूप से सटीक होने के लिए, ये DefaultValueAccessor के हैं : यह वह है जो डेटा को निकालता है और इसे आधार डोम ऑब्जेक्ट में स्थानांतरित करता है, हालांकि ... आप बस इसके बारे में नहीं सोच सकते हैं)।

अंतिम लेकिन कम से कम, दो बार उपयोगकर्ता नाम और ngModel लिखने के बाद भी बेमानी है, कोणीय को छोटे सिंटैक्स [()] का उपयोग करने की अनुमति देता है, जिसे "एक बॉक्स में केला" भी कहा जाता है। जो पिछले उदाहरण के समान है, और हमें अनुभाग की शुरुआत से उदाहरण पर लौटता है, लेकिन ngModel कार्यान्वयन की समझ के साथ। समान दो-तरफ़ा बंधन प्रदान करना।

 <input [(ngModel)]="username"> <p>Hello {{username}}!</p> 

अपना खुद का दो-तरफ़ा डेटा बाइंडिंग बनाएँ

अब हम अपने दो-तरफ़ा डेटा बाइंडिंग बनाने के लिए पर्याप्त जानते हैं। आपको बस इन नियमों का पालन करना होगा , जैसे कि ngModel ,

• एक संपत्ति बंधन दर्ज करें (उदाहरण के लिए: [foo] )
• एक ही नाम और प्रत्यय के साथ एक घटना के लिए बाध्य बदलें (उदाहरण के लिए: fooChange )
• सुनिश्चित करें कि इवेंट बाइंडिंग संपत्ति को पुनः प्राप्त करने का ध्यान रखता है (यदि आवश्यक हो)

ध्यान दें कि दो-तरफ़ा डेटा बाइंडिंग बनाने के लिए AngularJS की तुलना में अधिक कार्य की आवश्यकता होती है? यह हमारे लिए बहुत निराशाजनक हो सकता है ... अगर हम अपने स्वयं के दो-तरफ़ा बंधन का उपयोग करने की कोशिश करेंगे जहाँ भी संभव हो। वास्तविक जीवन में, आपको हमेशा इस बात पर विचार करना चाहिए कि क्या हमें दो-तरफ़ा बाइंडिंग की आवश्यकता है, और यदि आवश्यक हो, तो क्या ngModel का लाभ उठाना आसान है। उदाहरण के लिए, बाद में, कस्टम प्रपत्र नियंत्रण बनाते समय होता है।

लेकिन मान लें कि हम एक कस्टम काउंटर घटक बनाते हैं (और कस्टम फ़ॉर्म नियंत्रण का उपयोग नहीं करना चाहते हैं)।

 @Component({ selector: 'custom-counter', template: ` <button (click)="decrement()">-</button> <span>{{counter}}</span> <button (click)="increment()">+</button> ` }) export class CustomCounterComponent { counterValue = 0; get counter() { return this.counterValue; } set counter(value) { this.counterValue = value; } decrement() { this.counter--; } increment() { this.counter++; } } 

हमारे पास काउंटर के वर्तमान मूल्य को प्रदर्शित करने के लिए काउंटर घटक की संपत्ति है। इसे दो-तरफ़ा बाइंडिंग प्रदान करने के लिए, पहली चीज़ इसे इनपुट पैरामीटर में बदलना है। इसके लिए, @Input () डेकोरेटर बहुत उपयोगी है:

 @Component() export class CustomCounterComponent { counterValue = 0; @Input() get counter() { return this.counterValue; } ... } 

यह पहले से ही आपको घटक संपत्ति को उपभोक्ता के साथ बांधने की अनुमति देता है:

 <custom-counter [counter]="someValue"></custom-counter> 

अब हमें @Output () इवेंट को एक ही नाम ( काउंटर ) और प्रत्यय चेंज (यह प्रतिरूप बदल जाता है) के साथ सेट करना होगा। हम हर बार काउंटर परिवर्तन के लिए इस घटना को उठाना चाहते हैं। क्यों @Output () संपत्ति जोड़ें। और हम कुछ प्राप्तकर्ताओं में, काउंटर सेटर को समाप्त करेंगे, जिसमें हम मूल्य परिवर्तन को रोकेंगे और एक घटना को वर्तमान काउंटर मान के साथ फेंक देंगे:

 @Component() export class CustomCounterComponent { ... @Output() counterChange = new EventEmitter(); set counter(val) { this.counterValue = val; this.counterChange.emit(this.counterValue); } ... } 

यह बात है! अब हम दो-तरफ़ा डेटा बाइंडिंग सिंटैक्स का उपयोग करके इस गुण की अभिव्यक्ति को बाँध सकते हैं:

 <custom-counter [(counter)]="someValue"></custom-counter> <p>counterValue = {{someValue}}</p> 

डेमो देखें और इसे आज़माएं!

फिर, ध्यान रखें कि एक कस्टम काउंटर जैसे एक घटक को कस्टम फ़ॉर्म नियंत्रण के साथ सबसे अच्छा लागू किया जाता है, और दो-तरफ़ा डेटा बाइंडिंग को कार्यान्वित करने के लिए ngModel का लाभ उठाएं, जैसा कि इस लेख में वर्णित है।

निष्कर्ष

कोणीय अब अंतर्निहित दो-तरफ़ा डेटा बाइंडिंग के साथ नहीं आता है। इसके बजाय, बॉक्स में एपीआई हैं जो आपको बाध्यकारी गुणों और घटनाओं के रूप में पूर्ण बाध्यकारी को लागू करने की अनुमति देते हैं।

ngModel FormsModule में अंतर्निहित दो-तरफ़ा बाइंडिंग निर्देश के रूप में आता है (याद रखें इसे @NgModule घोषणा के आयात अनुभाग में जोड़ें: लगभग)। कस्टम प्रपत्र नियंत्रण के रूप में काम करने वाले घटकों को बनाते समय एनकोमॉडल के माध्यम से लिंक करना पसंद किया जाना चाहिए। अन्यथा, यह सब आपकी कल्पना पर निर्भर करता है।

अनुवादक से पुनश्च: A2 + में बाध्यकारी कार्यान्वयन अधिक आधुनिक हो गया है। अब, लगभग "मुक्त" बसेरों का उपयोग "फेंग शुई" द्वारा परिवर्तनों की निगरानी के लिए किया जाता है (हालांकि यह स्पष्ट है कि गंदे-जांच के लिए तंत्र कम से कम उच्च-स्तरीय उपयोगकर्ता घटकों के लिए है)। इससे 100,500 वॉचर्स ("उनके" डेटा में बदलाव की निगरानी करने वाली प्रक्रियाएं) को छोड़ना संभव हो गया। A1 में कौन सा ब्राउज़र पर एक दुर्भावनापूर्ण भार बनाना पसंद करता था और अमीर इंटरैक्टिव पृष्ठों की योजना बनाते समय असामान्य रूप से प्रत्यक्ष हाथों की आवश्यकता होती थी।

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

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

मुझे उम्मीद है कि इस लेख के साथ मैं A2 + के प्रारंभिक प्रवेश के लिए सीमा को थोड़ा कम करने में मदद करूंगा, जो कि मांग में जारी है (जिसे मैं पहले से जानता हूं)।