ट्विटर फ्लाइट घटकों के कई उदाहरणों के लिए घटनाओं को संभालना

मैं एक decoupled यूआई वास्तुकला का लक्ष्य रख रहा हूँ। मैं कैरोसेल और अंकन घटकों को एक-दूसरे से अलग करना चाहता हूं; लेकिन एक 'uiCarouselMoved' घटना पर परिवर्तन सुनने में सक्षम अंकन के साथ।

Example: http://jsbin.com/uQadehI/1/edit?html,js,output

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

तो, स्रोत कैरोसेल के आधार पर, यह जानना संभव है कि कौन सा अंकन अपडेट किया जाए?

0

2 उत्तर

एक पेजिनेशन मिश्रण बनाने और इसे कैरोसेल में मिलाकर यह समझ में आता है।

एक और विकल्प संरचना प्रदान करने के लिए डीओएम का उपयोग करना है। एक ही डोम नोड या पेड़ पर अंकन और कैरोसेल का एक उदाहरण संलग्न करके, आप दोनों के बीच एक गैर-घोषणात्मक संबंध बनाते हैं।

वैकल्पिक रूप से, एक अद्वितीय आईडी उत्पन्न करें (उदाहरण के लिए, _.uniqueId http://underscorejs.org/#uniqueId) और कैरोसेल से डेटा के साथ पास करें। इसे प्रतिक्रिया में भी शामिल किया जा सकता है, जिससे घटकों को यह निर्धारित करने की अनुमति मिलती है कि क्या वे वैश्विक घटनाओं में रूचि रखते हैं।

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

4
जोड़ा
आपके व्यापक उत्तर टॉम के लिए धन्यवाद! मैंने रयान को सही के रूप में चिह्नित किया है क्योंकि प्रदान किया गया उदाहरण अच्छी तरह फिट होना प्रतीत होता है। मैं निर्भरताओं के साथ मुद्दों को समझता हूं, हालांकि।
जोड़ा लेखक joecritch, स्रोत
नमस्ते टॉम। क्या आप दूसरे मामले का उदाहरण दिखा सकते हैं? (संरचना प्रदान करने के लिए डीओएम का उपयोग कैसे करें)
जोड़ा लेखक Vadim Sanko, स्रोत

मैं पृष्ठांकन बनाने के लिए और क्रमशः हिंडोला दोनों mixins , with_carousel और with_pagination हैं व्यक्तिगत घटकों के बजाय। यह आप दोनों एक ही घटक के भीतर उपयोग करने के लिए, और एक नया बाहरी स्तर डोम नोड के लिए कि घटक संलग्न की अनुमति देगा। यह आप दस्तावेज़ को श्रोता संलग्न की स्थानीय स्तर पर बजाय uiCarouselMoved घटना के लिए सुनने के लिए अनुमति देगा।

An example is here: http://jsbin.com/iZeLABAW/1/edit

1
जोड़ा
धन्यवाद रयान, मुझे यह समाधान पसंद है। उदाहरण के लिए भी प्रॉप्स।
जोड़ा लेखक joecritch, स्रोत
यह एक अच्छा उदाहरण है। एक सुझाव: आप प्रत्येक को this.changeCurrentIndicator में हटा सकते हैं और इसके शरीर को एक छोटे संस्करण में बदल सकते हैं: this.select ('संकेतक')। RemoveClass (यह .attr.currentClass और जेडडब्ल्यूएनजे;) .eq (data.index) .add और जेडडब्ल्यूएनजे; क्लास (this.attr.curr और जेडडब्ल्यूएनजे; entClass);
जोड़ा लेखक Rudi, स्रोत
मुझे वास्तव में करौसेल और सम्मेलन प्रति सम्मेलन के साथ कार्यों का नाम होना चाहिए था। फ़ाइलों को_carousel.js और with_pagination.js के साथ नामित किया जाएगा।
जोड़ा लेखक Ryan O'Neill, स्रोत