पॉलिमर

Question

के साथ कई तत्वों का विस्तार कैसे करें मुझे पता है कि यह प्रश्न multiple inheritance/composition पर है। हालांकि, ऐसा लगता है कि इस सवाल के बारे में अधिक जानकारी है कि अन्य तत्वों में कई मौजूदा तत्वों से कार्यक्षमता का पुन: उपयोग कैसे करें। और जाहिर है, इसके लिए समाधान mixins हैं।

मैं जानना चाहता हूं कि वास्तव में मैं उन तत्वों को वास्तव में "सजाने" कैसे कर सकता हूं, बिना वास्तव में उनसे कार्यक्षमता उधार लेता हूं। हम जानते हैं कि यह extends संपत्ति है जो पॉलिमर के साथ मौजूदा तत्व को विस्तारित करने के लिए उपयोग कर सकती है।

तो एक सामान्य <button>mega-button जैसा व्यवहार <button is="mega-button"> को जोड़ने के समान सरल है और इसके लिए एक घटक लिखें। लेकिन यह पता चला है कि extend एकाधिक तत्वों के लिए संभव नहीं है। तो extends="foo bar" की तरह कुछ काम नहीं करता है। क्या होगा यदि मैं एक वेब घटक बनाना चाहता हूं, जिसे वास्तव में विभिन्न तत्वों पर लागू किया जा सकता है?

उदाहरण के लिए, मैं नहीं चाहता कि केवल mega-button साथ <button> तत्वों का विस्तार करने के लिए एक <a> तत्व चाहते हैं, लेकिन शायद यह भी इतना है कि यह की तरह लग रहा है और एक mega-button भी तरह बर्ताव करता है?

मिश्रण दृष्टिकोण वास्तव में यहां सहायता नहीं करता है (जहां तक ​​मुझे यह मिलता है), क्योंकि वे कुछ और नहीं करते हैं, फिर विभिन्न वेब घटकों के लिए साझा तर्क प्रदान करते हैं। इसका मतलब है, आप एक मिश्रण से कई घटक बनाते हैं, और तर्क (एक मिश्रण में पैक) का पुन: उपयोग करते हैं।

मैं क्या जरूरत है एक वेब घटक है कि कई तत्वों के लिए लागू किया जा सकता बनाने के लिए एक तरीका है।

कोई विचार यह कैसे हल करें?

अद्यतन

एडी कुछ दृष्टिकोण के साथ उत्तर दिया कि उपयोग के मामले को संभालने के लिए। यहाँ एक अनुवर्ती प्रश्न एक दृष्टिकोण

How to find out what element is going to be extended, while registering my own in Polymer

और Is it possible to share mixins across web components (and imports) in Polymer?

अद्यतन 2

पर एक दूसरे पर आधारित है मैं एक लेख लिखा और विरासत के बारे में अपने अनुभवों और सीखी निष्कर्ष निकाला गया है और बहुलक के साथ संरचना: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

Answer 1

यदि आपको केवल एक ही आयात करने की आवश्यकता है जिसमें suppo है कई तत्वों पर लागू होने के लिए आरटी, आपके तत्व में कई तत्व परिभाषाएं शामिल हो सकती हैं जो आपके सजाने वाले तत्वों के बीच कार्यक्षमता साझा करने के लिए Polymer.mixin का लाभ ले सकती हैं या नहीं।

तो pascal-decorator.html<pascal-span> और <pascal-button>, जो दोनों के किसी वस्तु से mixin तर्क pascal-decorator.html में परिभाषित के लिए पॉलिमर तत्व परिभाषाएँ हो सकता है। इसके बाद आप <button is="pascal-button"> और <button is="pascal-span"> कर सकते हैं, जबकि ऐसा करने के लिए तर्क एक ही आयात के अंदर रहता है।

विकल्प (यदि आप सख्ती से यह सब एक कस्टम तत्व में करना चाहते हैं, जो आईएमओ, यह कम साफ करता है) कुछ ऐसा करना है जैसे तत्व के विस्तार के प्रकार की जांच करना, जो या तो तरीके से किया जा सकता है आप linked to या अपने तत्व पंजीकरण प्रक्रिया के हिस्से के रूप में जांच कर।

आम तौर पर, मैं व्यक्तिगत रूप से यह समझना पसंद करता हूं कि सजाए जाने वाले तत्वों के बीच मुझे कौन सा तर्क साझा करने की आवश्यकता हो सकती है, उस तत्व को उस तत्व में अलग कर सकते हैं और फिर उन्हें समर्पित तत्वों में आयात कर सकते हैं जिनके पास टैग के बारे में ज्ञान है (उदाहरण के लिए <addy-button> , <addy-video> आदि)।