AngularJS जादू: आदिम पर कभी भी बाँध नहीं लटका

AngularJS का जादू: आदिम लोगों पर कभी भी बाध्यकारी नहीं है

यदि आप AngularJS का उपयोग करते हैं, तो सबसे अधिक संभावना है कि आपने बार-बार नियम का सामना किया है "आदिमों पर बाध्यकारी लटका न दें।" इस पोस्ट में, मैं एक विस्तृत उदाहरण के माध्यम से जाऊंगा जिसमें प्राइमेटिव्स का उपयोग समस्याएं पैदा करता है: उन तत्वों की एक सूची बनाना जिसमें प्रत्येक तत्व एक स्ट्रिंग से जुड़ा हुआ है।

हमारा उदाहरण है

मान लें कि आप पुस्तकों के साथ एक एप्लिकेशन पर काम कर रहे हैं, और प्रत्येक पुस्तक में टैग की एक सूची है। उपयोगकर्ता को टैग संपादित करने की क्षमता देने का एक भोला तरीका होगा:

<div ng-controller="bookCtrl"> <div ng-repeat="tag in book.tags"> <input type="text" ng-model="tag"> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

(आप शायद नए टैग और मौजूदा टैग हटाने के लिए एक बटन जोड़ने के लिए एक और क्षेत्र जोड़ना चाहते हैं, लेकिन हम सादगी के लिए इसे अनदेखा करेंगे।)



हमारे उदाहरण का एक डेमो यहाँ उपलब्ध है । इनपुट फ़ील्ड में से किसी एक को संपादित करने का प्रयास करें। ऐसा लगेगा कि सब ठीक है। लेकिन ऐसा है नहीं। यदि आप एक करीब से देखते हैं, तो आप देखेंगे कि आपके द्वारा किए गए परिवर्तन book.tags सरणी के साथ सिंक्रनाइज़ नहीं किए गए हैं।



ऐसा इसलिए है क्योंकि एनजी-रिपीट प्रत्येक टैग के लिए एक बच्चा गुंजाइश बनाता है और वास्तविकता में स्कोप इस तरह दिख सकते हैं:

 bookCtrl scope = { tags: [ 'foo', 'bar', 'baz' ] } ng-repeat child scopes: { tag: 'foo' }, { tag: 'bar' }, { tag: 'baz' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



अब आपने देखा है कि कैसे आदिम आपके साथ एक बुरा मजाक खेल सकते हैं। यदि हम प्रत्येक टैग के लिए तार के बजाय वस्तुओं का उपयोग करते हैं, तो सब कुछ काम करेगा, क्योंकि चाइल्ड स्कोप में टैग बुकटैग में उसी तरह का उदाहरण होगा, और इसके मूल्य को बदलना (उदाहरण के लिए, tag.name) बस काम करेगा , यहां तक ​​कि 2-तरह के बंधन के बिना।



लेकिन मान लीजिए कि हम यहां वस्तुओं का उपयोग नहीं करना चाहते हैं। इस मामले में क्या करना है?

असफल प्रयास

- मुझे पता है! - क्या आप सोच सकते हैं। - मैं एनजी-रिपीट को सीधे उच्च स्तरीय टैग की सूची के साथ जोड़ूंगा! आइए कोशिश करते हैं:

 <div ng-controller="bookCtrl"> <div ng-repeat="tag in book.tags"> <input type="text" ng-model="book.tags[$index]"> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



जैसा कि आप देख सकते हैं, जब आप एक चरित्र टाइप करते हैं, तो इनपुट फ़ील्ड फोकस खो देता है। WTF?



इसके लिए एनजी-रिपीट दोष दें। दक्षता के लिए, एनजी-रिपीट सूची में सभी मूल्यों पर नज़र रखता है और विशिष्ट तत्वों को बदल देता है जो बदल गए हैं।



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

निर्णय

हमें सूची में मौजूद तत्वों को पहचानने का एक तरीका खोजने की जरूरत है, भले ही उनका आदिम मूल्य हो। एक अच्छा विकल्प सूची पर आदिम सूचकांक का उपयोग करना होगा। लेकिन सूची में आइटम ट्रैक करने के लिए एनजी-रिपीट कैसे सिखाएं?



हमारे लिए सौभाग्य से, ऑपरेटर द्वारा ट्रैक को कोणीय 1.2 में दिखाई दिया:

 <div ng-controller="bookCtrl"> <div ng-repeat="tag in book.tags track by $index"> <input type="text" ng-model="book.tags[$index]"> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



वास्तव में, एप्लिकेशन प्रदर्शन को बेहतर बनाने के लिए ट्रैक द्वारा बहुत अधिक उपयोगी है, लेकिन यह ऊपर वर्णित समाधान के बारे में जानने के लिए भी उपयोगी है। और, मेरी राय में, यह कोणीय के जादू को बेहतर ढंग से समझने में मदद करेगा।



अनुवादक से नोट: 29 मई को मास्को में एंगुलरजेएस को समर्पित एक रैली आयोजित की जाएगी, जहां इस विषय पर चर्चा की जाएगी।