उल्का + JQuery- यूआई छँटाई + एनिमेशन + टोड

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

यह पोस्ट इस बारे में है कि कैसे मैंने एनीमेशन को पेंच करने की कोशिश की और प्रसिद्ध टॉडोस उदाहरण को छाँटा ।

परिचय

उल्का के डेवलपर्स का वादा है कि वे JQuery-UI सॉर्टेबल या इसकी समानता का उपयोग करने की संभावना पर काम कर रहे हैं। लेकिन मैंने अभी तक नहीं पाया है कि इसे अपने हाथों से कैसे छूना है।

लेकिन एनीमेशन के साथ जब तक प्रकाश दिखाई नहीं देता है। यहाँ टॉम कोलमैन ने इसके बारे में क्या लिखा है:

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

ऐसा हुआ कि मुझे कल इसकी आवश्यकता थी, इसलिए मैंने यह देखने की कोशिश की कि कार्यान्वयन की कठिनाइयाँ क्या हैं।

क्या हुआ?

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

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

विशेष रूप से, यह वहां काम करता है:

1. तोडकी को छाँट रहे हैं।
2. चादरें क्रमबद्ध करें।
3. किसी अन्य क्लाइंट पर सॉर्ट एनीमेशन।
4. तत्वों को हटाने और जोड़ने का संयम।

गुलजार लोगों के लिए विकास शुरू हुआ। 10 मिनट में पूरा करने के बाद, मैं चादरों की सूची के लिए समान उपवास करने में कामयाब रहा। दरअसल, एक त्वरित पुनर्मिलन के लिए, यह किया गया था।

कीड़े

मुख्य बग जिसे मैं छुटकारा नहीं दिला सका था, Meteor.render के माध्यम से बनाए Meteor.render टेम्पलेट को फिर से Meteor.render करने में असमर्थता थी। यदि डेटा बदल गया है, तो कोड पुराने टुकड़े को हटा देता है और एक नया बनाता है। इस वजह से, preserve सुविधाएँ काम नहीं करती हैं।

कई समस्याएँ DOM तत्वों में बड़े बदलाव के साथ थीं। उल्का के साथ उल्का और छंटनी दोनों ही बहुत गतिशील रूप से काम करते हैं, मुझे उनसे दोस्ती करनी थी।

उपाय के टोटके

समाधान के मुख्य Meteor cursor observer से एक यह है कि Meteor cursor observer के परिवर्तनों के क्रमिक संकेतों के बाद वृद्धिशील डोम परिवर्तन का उपयोग है।

उसी समय, उल्का और छंटनी के बीच डोम के साथ संघर्ष को हल करने के लिए, एनीमेशन की देरी को ध्यान में रखते हुए, एक घटना कतार बनाई जाती है। कतार में परिवर्तन होता है और क्रमिक रूप से एक के बाद एक परिवर्तन होता है।

इस प्रकार, यह वही अनुक्रमिक परिवर्तनों का अनुकरण करता है जो उल्का करता है, लेकिन एनीमेशन के लिए देरी के साथ।

निष्कर्ष

सबसे पहले, यह ध्यान दिया जाना चाहिए कि यह ड्रैग को तेज करने और सूचियों को छोड़ने और एनीमेशन करने के लिए एक अपेक्षाकृत त्वरित तरीका निकला।

मुझे उम्मीद है कि यह समाधान, हालांकि यह एक हैक है, फिर भी उल्का पैटर्न के जितना करीब संभव है। और इसका मतलब यह है कि जब उल्का ऐसा करने में सक्षम होता है, तो एक बड़े एप्लिकेशन के समाप्त कोड को हैक के बिना एक नियमित सर्किट में हैक के साथ रीमेक करना मुश्किल नहीं होगा।

विकास प्रक्रिया के दौरान, मुझे कीड़े पकड़ने में बहुत मुश्किल हुई। शायद सभी पकड़े नहीं गए थे। जो लोग चाहते हैं, परीक्षण करें। मुझे खुशी होगी अगर समाधान को अधिक अनुभवी डेवलपर्स द्वारा माना जाता है जो आपको बताएगा कि इसे कैसे सुधारना है।