दृश्य बनाम अवयव Ember.js में


143

मैं ember.js सीख रहा हूं, और मैं एक दृश्य और एक घटक के बीच के अंतर को समझने की कोशिश कर रहा हूं। मैं दोनों को पुन: प्रयोज्य घटक बनाने के एक तरीके के रूप में देखता हूं।

विचारों पर एम्बर की वेबसाइट से:

Ember.js में दृश्य आमतौर पर केवल निम्नलिखित कारणों से बनाए जाते हैं:
-जब आपको उपयोगकर्ता ईवेंट की परिष्कृत हैंडलिंग की आवश्यकता होती है
-जब आप एक पुन: उपयोग करने योग्य घटक बनाना चाहते हैं

घटकों पर एम्बर की वेबसाइट से:

एक घटक एक कस्टम HTML टैग है जिसका व्यवहार आप जावास्क्रिप्ट का उपयोग करके कार्यान्वित करते हैं और जिसकी उपस्थिति आप हैंडलबार्स टेम्प्लेट का उपयोग करके वर्णन करते हैं। वे आपको पुन: प्रयोज्य नियंत्रण बनाने की अनुमति देते हैं जो आपके एप्लिकेशन के टेम्पलेट्स को सरल बना सकते हैं।

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

जवाबों:


170

Ember.View

एक Ember.View वर्तमान में W3C द्वारा आपके लिए बनाए गए टैग तक सीमित है। लेकिन अगर आप अपने स्वयं के एप्लिकेशन-विशिष्ट HTML टैग को परिभाषित करना चाहते हैं और फिर जावास्क्रिप्ट का उपयोग करके उनके व्यवहार को लागू करते हैं? आप वास्तव में Ember.View के साथ ऐसा नहीं कर सकते ।

Ember.Component

ठीक यही घटक आपको करते हैं। वास्तव में, यह इतना अच्छा विचार है कि वर्तमान में W3C कस्टम एलिमेंट्स की युक्ति पर काम कर रहा है ।

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

यह हमारे लिए इतना महत्वपूर्ण है कि हम मानकों के साथ मिलकर काम कर रहे हैं ताकि यह सुनिश्चित हो सके कि हमारे घटकों का कार्यान्वयन वेब प्लेटफॉर्म के रोडमैप से मेल खाता है।

यह भी ध्यान रखना महत्वपूर्ण है कि एक Ember.Component वास्तव में एक Ember.View (एक उपवर्ग) है लेकिन वह पूरी तरह से अलग है । इसके टेम्प्लेट्स में प्रॉपर्टी एक्सेस व्यू ऑब्जेक्ट पर जाती है और एक्शन व्यू ऑब्जेक्ट पर भी लक्षित होते हैं । आसपास contextया बाहरी controller सभी संदर्भ संबंधी जानकारी तक पहुँच नहीं है , जो कि Ember.View के साथ ऐसा नहीं है, जिसके पास वास्तव में इसके आसपास के नियंत्रक तक पहुंच है, उदाहरण के लिए एक दृश्य के अंदर आप ऐसा कुछ कर सकते हैं this.get('controller')जो आपको प्रदान करेगा। नियंत्रक वर्तमान में दृश्य के साथ जुड़ा हुआ है।

तो एक दृश्य और एक घटक के बीच मुख्य अंतर क्या है?

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

और एक सामान्य उदाहरण क्या होगा जहां मैं एक घटक पर एक दृश्य का उपयोग करना पसंद करूंगा और इसके विपरीत?

उपरोक्त का पालन करना आपके उपयोग के मामलों पर स्पष्ट रूप से निर्भर करता है। लेकिन अंगूठे के एक नियम के रूप में, यदि आपको अपने आसपास के नियंत्रक आदि की पहुंच की आवश्यकता है, तो एक Ember.View का उपयोग करें , लेकिन यदि आप दृश्य को अलग करना चाहते हैं और केवल उस जानकारी को पास करना चाहते हैं, जिसे इसे संदर्भ-अज्ञेय बनाने के लिए काम करने की आवश्यकता है और बहुत अधिक पुन: प्रयोज्य, एक Ember.Component का उपयोग करें ।

आशा करता हूँ की ये काम करेगा।

अपडेट करें

सड़क के एम्बर 2.0 के प्रकाशन के साथ अब आप अधिकांश मामलों में दृश्य के बजाय अवयवों का उपयोग करने के लिए प्रोत्साहित होते हैं।


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

3
@ sly7_7, हां मुझे आपकी बात अच्छी लगी। लेकिन मैं एक ब्लैक बॉक्स के रूप में एक घटक के बारे में सोचूंगा, केवल उस डेटा के आधार पर व्यवहार करना जो इसमें पास हो जाता है। और हाँ यह क्या करता है पर निर्भर करता है कि यह बहुत जल्दी गड़बड़ हो सकता है। एक समर्पित नियंत्रक पूरी तरह से समझ में आता है, और एक तरह से यह काम कर सकता है यदि घटक तर्क में अंतःक्षिप्त हो सकते हैं, लेकिन जहां तक ​​मुझे पता है कि घटक डिजाइन द्वारा मुझे लगता है कि अंगारे के कंटेनर का हिस्सा नहीं हैं, लेकिन यह भविष्य में बदल सकता है कुछ इस तरह से हल। वैसे भी अच्छा बिंदु!
सहज ज्ञान युक्त

2
क्या कोई बाइंडिंग किसी घटक से बाहर जा सकती है ? IE, एक घटक के ब्लॉक रूप के साथ घटक के तत्वों को घटक के गुणों से बांध सकता है, या मुझे इस मामले में एक दृश्य का उपयोग करना चाहिए?
माइकल जॉनसन

2
आह, हाँ वे कर सकते हैं। {{view.xxxx}}एक घटक के रूप में एक दृश्य में काम करता है।
माइकल जॉनसन

इस विषय पर टॉम डेल की टिप्पणियाँ: ember.zone/the-confusion-raction-ember-views-and-compenders/…
अक्षय रावत

17

उत्तर सरल है: घटकों का उपयोग करें

अगस्त 2013 को रिकॉर्ड किए गए एक प्रशिक्षण वीडियो के अनुसार, येहुदा काट्स और टॉम डेल (एम्बर कोर टीम के सदस्य) ने दर्शकों से कहा कि जब तक आप एक फ्रेमवर्क डेवलपर नहीं हैं, तब तक विचारों का उपयोग न करें। उन्होंने हैंडलबार्स और बहुत से घटकों को बढ़ाया है, इसलिए विचार अब आवश्यक नहीं हैं। दृश्य का उपयोग आंतरिक रूप से {{#if}} और {{आउटलेट}} जैसी चीजों के लिए किया जाता है।

अवयव भी वेब घटक मानक की बारीकी से नकल करते हैं जो कि ब्राउज़र में निर्मित होंगे, इसलिए आरामदायक ईमारत घटक बनने के बहुत से साइड इफ़ेक्ट हैं।

अपडेट 2014-11-27

विचारों के बजाय घटकों का उपयोग करना अब और भी महत्वपूर्ण है, क्योंकि जब कोई मार्ग नियंत्रक या दृश्य के बजाय प्रवेश किया जाता है, तो एम्बर 2.0 रूटेबल घटकों का उपयोग करेगा। अपने ऐप को भविष्य में प्रूफ़ देने के लिए, व्यूज़ से दूर रहना सबसे अच्छा है।

सूत्रों का कहना है:


5
"यदि आपको लगता है कि आपको एक दृश्य का उपयोग करने की आवश्यकता है, तो इसके बजाय एक घटक का उपयोग करें।" भयानक सलाह है, और घटकों को शामिल करने वाले अलगाव की समझ की कमी है।
jmcd

@jmcd, हालाँकि वह टिप्पणी फ्रेमवर्क डेवलपर्स की ओर से आई है, मैंने इसे निकाल लिया है।
जॉनी ओशिका

2
मुझे स्रोत मिला: गैसलाइट वीडियो प्रशिक्षण, वीडियो 10.3 घटक क्यू एंड ए @ 26 एम मार्क। टॉम कहता है: '' चूंकि वे उदाहरण लिखे गए थे, ... हमने घटक जोड़े हैं [जो] उन उदाहरणों के लिखे जाने पर मौजूद नहीं थे। सामान्य तौर पर मैं कहूंगा कि दृश्य कुछ ऐसा नहीं है जिसकी हम अधिकांश डेवलपर्स से उम्मीद करेंगे कि वे लिख रहे हों, वे इस बिंदु पर एक आंतरिक पुस्तक रखने की वस्तु हैं '
jmcd

2
@jmcd, उस वीडियो @ 26:15 में, टॉम का कहना है कि "मूल रूप से दृश्य का उपयोग न करें"। इसके अलावा, यदि आप एक ही वीडियो में 30 मीटर तक कूदते हैं, तो येहुदा काट्ज़ कहते हैं: "देखें मूल रूप से एक आंतरिक कार्यान्वयन विवरण है ... आप एक दृश्य का उपयोग कर सकते हैं, लेकिन फिर आप एक फ्रेमवर्क डेवलपर हैं। आपको इसके बजाय चीजों में से एक का उपयोग करना चाहिए। हमने आपके लिए बनाया है जो व्यू का उपयोग करता है, और वह जो व्यू के सबसे करीब है, लेकिन बेहतर शब्दार्थ है कंपोनेंट है। जो भी आप पहले के लिए व्यू का इस्तेमाल कर सकते थे, कंपोनेंट ठीक है। "
जॉनी ओशिका

5

जैसा कि यह अब खड़ा है - v2.xवर्तमान स्थिर रिलीज - विचार पूरी तरह से पदावनत किया गया है। ऐसा कहा जाता है कि एम्बर 2.0 एपीआई से विचारों को हटाया जा रहा है

तो, {{view}}एम्बर 2.0 में कीवर्ड का उपयोग एक जोर का ट्रिगर करेगा:

अभिकथन विफल: {{view}}Ember 2.0 में इसके आधार पर उपयोग या किसी भी पथ को हटा दिया गया है

यदि आपको एम्बर 2.0 में विचारों का उपयोग करना है तो आप एम्बर-विरासत-विचार एडऑन का उपयोग कर सकते हैं , जो संस्करण 2.4 के साथ एम्बर के साथ संगत होगा

तो, योग करने के लिए - घटक वर्तमान हैं (हटाए जा रहे विचार) और भविष्य - वे भी नियंत्रकों की जगह लेंगे। राउटेबल कंपोनेंट्स RFC देखें ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.