हम Ember.js के आधिकारिक गाइड से ट्यूटोरियल के अनुवाद को प्रकाशित करना जारी रखते हैं। ट्यूटोरियल में दो भाग होते हैं और यह ट्यूटोरियल के पहले भाग का दूसरा भाग है। हम आपको याद दिलाते हैं कि आप इस लिंक पर पहली छमाही को पढ़ सकते हैं

ट्यूटोरियल में शामिल विषयों की सूची से पता चलता है:

• एम्बर सीएलआई का उपयोग करना
• एम्बर एप्लिकेशन फ़ाइल और फ़ोल्डर नेविगेशन
• पृष्ठों के बीच बनाएँ और लिंक करें
• टेम्पलेट्स और घटकों
• स्वचालित परीक्षण
• सर्वर डेटा के साथ काम करें
• मार्गों में गतिशील खंड
• एम्बर पर सेवाएं
• एम्बर डेटा लाइब्रेरी
• एडेप्टर और धारावाहिक
• प्रदाता घटक पैटर्न

वापस बैठो, टर्मिनलों को खोलें, अपने कंप्यूटर पर प्रोजेक्ट ढूंढें और चलो आगे बढ़ें। और याद रखें कि यदि आपको कोई कठिनाई है, तो आप हमेशा डिसॉर्ड कम्युनिटी चैनल (रूसी चैनल # लैंग-रशियन ) और साथ ही रूसी भाषा में टेलीग्राम चैनल ember_js में मदद मांग सकते हैं

घटक विवरण

यह अंततः किराये की सूची पर काम करने का समय है:

किराये की संपत्तियों की इस सूची को संकलित करके, आप इसके बारे में जानेंगे:

• घटक पीढ़ी
• नेमस्पेस घटकों का उपयोग करके कोड का आयोजन
• अग्रेषण HTML विशेषताओं के साथ ...attributes
• परीक्षण कवरेज की उचित मात्रा का निर्धारण

घटक पीढ़ी

चलो <Rental> घटक बनाकर शुरू करते हैं। इस बार हम एक घटक और हमारे लिए एक परीक्षण फ़ाइल बनाने के लिए घटक जनरेटर का उपयोग करेंगे:

 $ ember generate component rental installing component create app/components/rental.hbs skip app/components/rental.js tip to add a class, run `ember generate component-class rental` installing component-test create tests/integration/components/rental-test.js 

जनरेटर ने हमारे लिए दो नई फाइलें app/components/rental.hbs : app/components/rental.hbs में कंपोनेंट टेम्प्लेट और tests/integration/components/rental-test.js में कंपोनेंट टेस्ट फाइल।

हम टेम्पलेट को संपादित करके शुरू करेंगे। एक पट्टे पर दी गई वस्तु के विवरण को हार्डकोड करें , और फिर इसे सर्वर से वास्तविक डेटा के साथ बदलें।

फिर हम यह सुनिश्चित करने के लिए एक परीक्षण लिखेंगे कि सभी विवरण मौजूद हैं। हम अपनी टीमों द्वारा हमारे लिए बनाई गई टेम्प्लेट परीक्षा की जगह लेंगे, जैसा कि हमने पहले <Jumbo> घटक के लिए किया था:

टेस्ट पास करना होगा।

अंत में, पेज को भरने के लिए इंडेक्स टेम्प्लेट में एक नया घटक जोड़ें।

इस मामले में, हमें पृष्ठ पर तीन बार हमारे ग्रैंड ओल्ड मेंशन को दिखाते हुए <Rental> घटक देखना चाहिए:

थोड़े से काम के लिए सब कुछ बहुत अच्छा लगता है!

नामस्थान का उपयोग करके कोड का आयोजन

अगला, किराये की संपत्ति के लिए एक छवि जोड़ें। हम फिर से इसके लिए घटक जनरेटर का उपयोग करेंगे:

 $ ember generate component rental/image installing component create app/components/rental/image.hbs skip app/components/rental/image.js tip to add a class, run `ember generate component-class rental/image` installing component-test create tests/integration/components/rental/image-test.js 

इस बार हमारे पास कंपोनेंट के नाम पर / थी। इससे app/components/rental/image.hbs में एक घटक का निर्माण app/components/rental/image.hbs , जिसे <Rental::Image> कहा जा सकता है।

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

अग्रेषण HTML विशेषताओं के साथ ...attributes

चलो घटक टेम्पलेट संपादित करें:

<img> में src और alt विशेषताओं के लिए विशिष्ट मान सेट करने के बजाए, हमने कीवर्ड ...attributes चुना, जिन्हें कभी-कभी "splattributes" भी कहा जाता है। यह आपको इस घटक को कॉल करते समय मनमाने ढंग से HTML विशेषताओं को पारित करने की अनुमति देता है, उदाहरण के लिए इस तरह:

हमने यहां HTML विशेषता src और alt निर्दिष्ट किया है, जो घटक को पास किया जाएगा और तत्व से जुड़ा होगा, जहां ...attributes घटक घटक में ...attributes को लागू किया जाता है। आप सोच सकते हैं कि यह {{yield}} समान है, लेकिन केवल HTML विशेषताओं के लिए और प्रदर्शन सामग्री के लिए नहीं। वास्तव में, हमने पहले ही इस फ़ंक्शन का उपयोग तब किया था जब हमने class <LinkTo> को <LinkTo> ।

इस प्रकार, हमारा <Rental::Image> घटक साइट पर किसी विशेष किराये की संपत्ति से जुड़ा नहीं है। बेशक, हमारे साथ सबकुछ भी मुश्किल है, लेकिन हम जल्द ही इससे निपटेंगे। इस बीच, हम पूरे हार्डकोड को एक घटक में सीमित कर देंगे ताकि जब हम वास्तविक डेटा निकालने के लिए आगे बढ़ें तो इसे साफ़ करना आसान हो।

सामान्य तौर पर, आपके घटक में मूल तत्व को जोड़ने के लिए यह एक अच्छा विचार है। यह अधिकतम लचीलापन प्रदान करेगा, क्योंकि पहुंचकर्ता को सुगमता में सुधार करने के लिए स्टाइलिंग क्लास या ARIA विशेषताओं को पास करना पड़ सकता है।

अब हमारे नए घटक के लिए एक परीक्षण लिखें!

परीक्षण कवरेज की उचित मात्रा का निर्धारण

अंत में, हमें यह सुनिश्चित करने के लिए <Rental> घटक के लिए परीक्षणों को अपडेट करने की भी आवश्यकता है कि हमने सफलतापूर्वक <Rental::Image> ।

चूंकि हमने पहले से ही <Rental::Image> से संबंधित परीक्षण लिखे हैं, यहां हम विवरण को छोड़ सकते हैं और चेक को कम कर सकते हैं। इस प्रकार, जब भी हम <Rental::Image> परिवर्तन करते हैं, तो हमें <Rental> टेस्ट को भी अपडेट नहीं करना पड़ता है।

इंटरएक्टिव घटक

इस अध्याय में, आप पृष्ठ में अन्तरक्रियाशीलता जोड़ते हैं, जिससे उपयोगकर्ता चित्र पर क्लिक करके उसे बड़ा या छोटा कर सकता है:

इस मामले में, आप इस बारे में जानेंगे:

• कक्षाओं के साथ घटकों में व्यवहार जोड़ना
• प्रवेश का उदाहरण टेम्पलेट से मिलता है
• ट्रैक किए गए गुणों के साथ राज्य प्रबंधन
• टेम्प्लेट में सशर्त सिंटैक्स का उपयोग करना
• क्रियाओं के साथ उपयोगकर्ता सहभागिता पर प्रतिक्रिया
• एलिमेंट मॉडिफायर्स को कैसे कॉल करें
• उपयोगकर्ता सहभागिता परीक्षण

कक्षाओं के साथ घटकों में व्यवहार जोड़ना

अब तक, हमारे द्वारा लिखे गए सभी घटक विशुद्ध रूप से प्रस्तुतिकरण हैं - वे पुन: प्रयोज्य मार्कअप के टुकड़े हैं। यह निश्चित रूप से, अद्भुत है, लेकिन एम्बर घटकों में बहुत अधिक कर सकते हैं!

कभी-कभी आप कुछ व्यवहारों को अपने घटकों के साथ जोड़ना चाहते हैं ताकि वे अधिक दिलचस्प चीजें कर सकें। उदाहरण के लिए, <LinkTo> URL बदलकर और किसी अन्य पृष्ठ पर जाकर क्लिकों का जवाब दे सकता है।

यहाँ हम कुछ ऐसा ही करने जा रहे हैं! हम «View Larger» और «View Smaller» की कार्यक्षमता को लागू करने जा रहे हैं, जो हमारे उपयोगकर्ताओं को घर पर छवि पर क्लिक करने, बड़े संस्करण को देखने और छोटे संस्करण पर लौटने के लिए फिर से उस पर क्लिक करने की अनुमति देगा।

दूसरे शब्दों में, हमें एक छवि को दो राज्यों के बीच स्विच करने का एक तरीका चाहिए। ऐसा करने के लिए, हमें दो संभावित राज्यों को संग्रहीत करने के लिए घटक की आवश्यकता है और यह जानना होगा कि वर्तमान में यह किस राज्य में है।

एम्बर अतिरिक्त रूप से हमें इस उद्देश्य के लिए विशेष रूप से एक घटक के साथ जावास्क्रिप्ट कोड को जोड़ने की अनुमति देता है। हम घटक जनरेटर को चलाकर अपने <Rental::Image> घटक के लिए एक जावास्क्रिप्ट फ़ाइल जोड़ सकते हैं:

 $ ember generate component-class rental/image installing component-class create app/components/rental/image.js 

इस कमांड ने app/components/rentals/image.js में हमारे कंपोनेंट टेम्पलेट के समान नाम के साथ एक जावास्क्रिप्ट फाइल app/components/rentals/image.js । इसमें @glimmer/component से विरासत में मिला एक जावास्क्रिप्ट वर्ग शामिल है।

ज़ो बताते हैं ...

@glimmer/component ग्लिमर @glimmer/component या ग्लिमर घटक उपयोग के लिए उपलब्ध घटकों के कई वर्गों में से एक है। जब आप अपने घटकों के साथ व्यवहार जोड़ना चाहते हैं तो वे एक महान प्रारंभिक बिंदु हैं। इस ट्यूटोरियल में, हम केवल ग्लिमर घटकों का उपयोग करेंगे।

सामान्य तौर पर, जब भी संभव हो, ग्लिमर घटकों का उपयोग किया जाना चाहिए। हालाँकि, आप पुराने अनुप्रयोगों में उपयोग किए गए @ember/components (क्लासिक घटकों) को भी देख सकते हैं। आप उन्हें आयात करने के मार्ग को देखकर एक दूसरे से अलग कर सकते हैं (जो कि उपयुक्त दस्तावेज की खोज करते समय उपयोगी है, क्योंकि उनके पास अलग और असंगत एपीआई हैं)।

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

यहां, कंपोनेंट कंस्ट्रक्टर में , हमने this.isLarge चर को this.isLarge किया है। मूल्य के साथ यह false , क्योंकि यह डिफॉल्ट स्टेट है जो हम अपने कंपोनेंट के लिए चाहते हैं।

प्रवेश का उदाहरण टेम्पलेट से मिलता है

आइए इस अवस्था का उपयोग करने के लिए अपने टेम्पलेट को अपडेट करें जिसे हमने अभी जोड़ा है:

टेम्पलेट में, हमारे पास घटक के उदाहरण चर तक पहुंच है। सशर्त सिंटैक्स {{#if ...}}...{{else}}...{{/if}} आपको स्थिति के आधार पर अलग-अलग सामग्री प्रदर्शित करने की अनुमति देता है (इस मामले में, उदाहरण चर का मान इस this.isLarge )। इन दोनों कार्यों को मिलाकर, हम क्रमशः छवि के एक छोटे और बड़े संस्करण दोनों की कल्पना कर सकते हैं।

हम अपनी जावास्क्रिप्ट फ़ाइल में प्रारंभिक मूल्य को अस्थायी रूप से बदलकर इसे सत्यापित कर सकते हैं। अगर हम app/components/rental/image.js को इनिशियलाइज़ करने के लिए app/components/rental/image.js this.isLarge = true । कंस्ट्रक्टर में हमें ब्राउज़र में प्रॉपर्टी इमेज का एक बड़ा संस्करण देखना चाहिए। वाह!

हमने जाँच करने के बाद, हम इसे बदल सकते हैं। this.isLarge वापस false बदल this.isLarge ।

चूंकि कंस्ट्रक्टर में उदाहरण चर के लिए यह इनिशियलाइज़ेशन पैटर्न काफी सामान्य है, इसलिए इसके लिए बहुत कम सिंटैक्स है:

एक ही कार्यक्षमता, लेकिन बहुत कम!

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

ट्रैक किए गए गुणों का उपयोग करते हुए राज्य प्रबंधन

आइए आकार बदलने के लिए एक विधि जोड़कर हमारी कक्षा बदलते हैं:

हमने यहां कुछ चीजें की हैं, तो चलिए इसका पता लगाते हैं।

सबसे पहले, हमने @tracked डेकोरेटर को @tracked उदाहरण isLarge जोड़ा। यह एनोटेशन अपडेट के लिए एम्बर को इस चर का ट्रैक रखने के लिए कहता है। जब भी इस परिवर्तनशील चर का मान परिवर्तित होता है, तो एम्बर अपने मूल्य पर निर्भर किसी भी टेम्पलेट को अपने आप बदल देता है।

हमारे मामले में, जब भी हम इस this.isLarge को एक नया मान प्रदान this.isLarge , तो this.isLarge एनोटेशन, हमारे टेम्पलेट में स्थिति {{#if this.isLarge}} को {{#if this.isLarge}} करने और क्रमशः दो ब्लॉकों के बीच स्विच करने का कारण बनेगा।

ज़ो बताते हैं ...

चिंता मत करो! यदि आप टेम्पलेट में एक चर का उल्लेख करते हैं, लेकिन @tracked डेकोरेटर को जोड़ना भूल गए, तो विकास मोड में आपको इसका मूल्य बदलते समय स्पष्ट त्रुटि मिलेगी!

हम उपयोगकर्ता क्रियाओं को संसाधित करते हैं

फिर हमने अपनी कक्षा में toggleSize विधि को जोड़ा, जो इस स्विच को चालू स्थिति के विपरीत this.isLarge ( false true हो जाती true या true false हो जाती true )।

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

ज़ो बताते हैं ...

यदि आप @action डेकोरेटर को जोड़ना भूल जाते हैं, तो विकास मोड में बटन पर क्लिक करने पर आपको एक त्रुटि भी मिलेगी!

अब इसे खाके में इस्तेमाल करने का समय है:

हमने दो चीजें बदली हैं।

सबसे पहले, चूँकि हम अपने घटक को संवादात्मक बनाना चाहते थे, हमने युक्त टैग को <div> से <button> स्विच कर दिया (यह पहुँच के कारणों के लिए महत्वपूर्ण है)। सही शब्दार्थ टैग का उपयोग करके, हम "फ़्री" फ़ोकस और कीबोर्ड इंटरैक्शन भी प्राप्त करेंगे।

इसके बाद हमने इस बटन को अटैच करने के लिए {{on}} संशोधक का this.toggleSize किया। बटन क्लिक हैंडलर के रूप में।

इस प्रकार, हमने अपना पहला इंटरैक्टिव घटक बनाया। कोशिश करें कि यह ब्राउज़र में कैसे काम करता है!

उपयोगकर्ता सहभागिता परीक्षण

अंत में, आइए इस नए व्यवहार के लिए एक परीक्षा लिखें:

परीक्षा परिणाम

आगे बढ़ने से पहले अपने टेम्पलेट को साफ करें। हमने बहुत सारे डुप्लिकेट जोड़े जब हमने टेम्पलेट में सशर्त अभिव्यक्तियाँ सम्मिलित कीं। यदि हम बारीकी से देखें, तो इन दो ब्लॉकों के बीच अंतर करने वाली एकमात्र चीजें हैं:
1) <button> में "large" सीएसएस वर्ग की उपस्थिति।
2) पाठ «» और «» ।

ये परिवर्तन बहुत सारे डुप्लिकेट कोड में छिपे हुए हैं। हम इसके बजाय {{if}} अभिव्यक्ति का उपयोग करके दोहराव को कम कर सकते हैं:

अभिव्यक्ति का संस्करण {{if}} दो तर्क लेता है। पहला तर्क शर्त है । दूसरा तर्क एक अभिव्यक्ति है, जिसे यदि स्थिति सत्य है तो निष्पादित किया जाना चाहिए।

वैकल्पिक रूप से, {{if}} तीसरे तर्क के रूप में एक अभिव्यक्ति ले सकता है जिसे शर्त के गलत होने पर निष्पादित किया जाना चाहिए। इसका मतलब है कि हम बटन लेबल को इस प्रकार फिर से लिख सकते हैं:

क्या यह हमारे कोड की स्पष्टता में सुधार है स्वाद का मामला है। किसी भी मामले में, हमने अपने कोड में दोहराव को काफी कम कर दिया है और तर्क के महत्वपूर्ण टुकड़ों को और अधिक दृश्यमान बना दिया है।

यह सुनिश्चित करने के लिए अंतिम बार परीक्षण चलाएं कि हमारे रीफैक्टरिंग ने कुछ भी नहीं तोड़ा, और हम अगली चुनौती के लिए तैयार होंगे!

पुन: उपयोग करने वाले घटक

घटक में शेष अनारक्षित हिस्सा घर का स्थान दिखाने वाला एक नक्शा है, जिस पर हम काम करना जारी रखेंगे:

नक्शा जोड़ते समय, आप इसके बारे में जानेंगे:

• आवेदन स्तर विन्यास प्रबंधन
• तर्कों के साथ घटकों का पैरामीटर
• घटक तर्कों तक पहुँच
• टेम्प्लेट में मूल्यों को इंटरपोल करना
• HTML विशेषताओं को ओवरराइड करने में ... विशेषताएँ
• गेटर्स और ऑटो-ट्रैकिंग (ऑटो-ट्रैक) के साथ रिफैक्टरिंग
• एक परीक्षण संदर्भ में जावास्क्रिप्ट मूल्यों को पुनः प्राप्त करना

आवेदन स्तर विन्यास प्रबंधन

हम अपनी किराये की संपत्तियों के लिए नक्शे बनाने के लिए मैपबॉक्स एपीआई का उपयोग करेंगे। आप मुफ्त और बिना क्रेडिट कार्ड के पंजीकरण कर सकते हैं।

मैपबॉक्स एक स्थिर मानचित्र छवि एपीआई प्रदान करता है जो पीएनजी प्रारूप में मानचित्र चित्र प्रस्तुत करता है। इसका अर्थ है कि हम उन मापदंडों के लिए उपयुक्त URL उत्पन्न कर सकते हैं जो हम चाहते हैं और मानक <img> का उपयोग करके मानचित्र प्रदर्शित करें। क्लास!

यदि आप रुचि रखते हैं, तो आप इंटरेक्टिव सैंडबॉक्स का उपयोग करके मैपबॉक्स में उपलब्ध विकल्पों का पता लगा सकते हैं।

आपके द्वारा सेवा के साथ पंजीकृत होने के बाद, अपना सार्वजनिक टोकन लें (डिफ़ॉल्ट सार्वजनिक टोकन) और इसे config/environment.js में पेस्ट करें:

जैसा कि नाम से पता चलता है, config/environment.js उपयोग हमारे एप्लिकेशन को कॉन्फ़िगर करने और इन जैसे API कुंजियों को संग्रहीत करने के लिए किया जाता है। इन मूल्यों को हमारे एप्लिकेशन के अन्य हिस्सों से एक्सेस किया जा सकता है, और वर्तमान परिवेश (जो विकास, परीक्षण (परीक्षण) या उत्पादन (उत्पादन)) के आधार पर उनके भिन्न मूल्य हो सकते हैं।

ज़ो बताते हैं ...

यदि आप चाहें, तो आप अलग- अलग वातावरण में उपयोग के लिए अलग-अलग मैपबॉक्स एक्सेस टोकन बना सकते हैं । कम से कम, प्रत्येक टोकन में मैपबॉक्स स्टेटिक इमेज एपीआई का उपयोग करने के लिए "स्टाइल: टाइल" स्कोप होना चाहिए।

हमारी कॉन्फ़िगरेशन फ़ाइल में परिवर्तनों को सहेजने के बाद, हमें इन फ़ाइल परिवर्तनों को प्राप्त करने के लिए अपने विकास सर्वर को पुनरारंभ करना होगा। हमारे द्वारा संपादित की गई फ़ाइलों के विपरीत, config/environment.js स्वचालित रूप से पुनरारंभ नहीं होता है।

आप उस टर्मिनल विंडो को ढूंढकर सर्वर को बंद कर सकते हैं जहां ember server चल रहा है, फिर "Ctrl" कुंजी दबाए रखते हुए कीबोर्ड पर "C" कुंजी दबाकर Ctrl + C दबाएं। एक बार जब यह बंद हो जाता है, तो आप उसी ember server कमांड का उपयोग करके इसे फिर से शुरू कर सकते हैं।

 $ ember server building... Build successful (13286ms) – Serving on http://localhost:4200/ 

एक घटक वर्ग युक्त एक घटक बनाना

एप्लिकेशन में मैपबॉक्स एपीआई कुंजी को जोड़ने के बाद, आइए हमारे नक्शे के लिए एक नया घटक बनाएं।

 $ ember generate component map --with-component-class installing component create app/components/map.js create app/components/map.hbs installing component-test create tests/integration/components/map-test.js 

चूँकि प्रत्येक घटक के पास आवश्यक रूप से एक विशिष्ट व्यवहार नहीं होगा, इसलिए डिफ़ॉल्ट रूप से घटक जनरेटर हमारे लिए एक जावास्क्रिप्ट फ़ाइल नहीं बनाता है। जैसा कि हमने पहले देखा, हम बाद में इसे जोड़ने के लिए घटक जनरेटर का उपयोग कर सकते हैं।

हालांकि, हमारे <Map> घटक के मामले में, हमें पूरा यकीन है कि हमें कुछ व्यवहार के लिए जावास्क्रिप्ट फ़ाइल की आवश्यकता होगी जिसे हमें अभी तक परिभाषित नहीं करना है! इसलिए, हम --with-component-class के साथ --with-component-class ध्वज --with-component-class पास कर सकते हैं ताकि हमारे पास वह सब कुछ हो जो हमें शुरू से ही चाहिए।

ज़ो सलाह देता है ...

टाइप करने के लिए बहुत ज्यादा? ember g component map -gc उपयोग करें। -gc ध्वज ग्लिमर घटक को दर्शाता है ( g limmer c omponent), और वर्ग को उत्पन्न भी करता है ( g cerate c lass)

तर्कों का उपयोग करते हुए घटकों का पैरामीटर

आइए हमारी जावास्क्रिप्ट फ़ाइल से शुरू करें:

यहां हम कॉन्फ़िगरेशन फ़ाइल से एक्सेस टोकन आयात करते हैं और इसे गेट्टर token से वापस करते हैं। यह हमें हमारे टोकन को एक्सेस करने की अनुमति देता है। MapComponent वर्ग और घटक टेम्पलेट में दोनों को शामिल करें। टोकन को एनकोड करना भी महत्वपूर्ण है, यदि इसमें कोई विशेष वर्ण हैं जो URL के लिए सुरक्षित नहीं हैं।

पैटर्न में मूल्यों का प्रक्षेप

अब जावास्क्रिप्ट फ़ाइल से टेम्पलेट पर जाएँ:

सबसे पहले, हमारे पास स्टाइल के लिए एक कंटेनर तत्व है।

फिर हमारे पास Mapbox से स्थिर मानचित्र छवि का अनुरोध करने और प्रदान करने के लिए <img> ।

हमारे टेम्पलेट में कई मान हैं जो अभी तक मौजूद नहीं हैं - @lat , @lng , @zoom , @width और @height । ये <Map> घटक के तर्क हैं जिन्हें हम इसे कॉल करने पर प्रदान करेंगे।

अपने घटक को तर्कों के साथ जोड़ते हुए, हमने एक पुन: प्रयोज्य घटक बनाया जिसे आवेदन के विभिन्न भागों से बुलाया जा सकता है और इन विशिष्ट संदर्भों की आवश्यकताओं को पूरा करने के लिए अनुकूलित किया जा सकता है। हमने पहले ही इसे देखा था जब <LinkTo> घटक का उपयोग कर रहा था; हमें @route तर्क को निर्दिष्ट करने की आवश्यकता थी @route यह पता चले कि किस पृष्ठ पर जाना है।

हमने @lat और @lng के मूल्यों के आधार पर पूरी विशेषता के लिए एक उचित डिफ़ॉल्ट मान प्रदान किया @lng । आप देख सकते हैं कि हम मूल्यों को सीधे alt विशेषता के मूल्य में प्रक्षेपित करते हैं। एम्बर स्वचालित रूप से इन प्रक्षेपित मूल्यों को एक स्ट्रिंग मान में जोड़ देगा, जिसमें किसी भी आवश्यक बचने वाले HTML का निष्पादन शामिल है।

HTML विशेषताओं को ओवरराइड करना ...attributes

तब हमने उपयोग किया ...attributes कॉल करने की अनुमति देने के लिए ...attributes <img> को और अधिक अनुकूलित करने के लिए, उदाहरण के लिए, अतिरिक्त विशेषताएँ जैसे कि class , और एक अधिक विशिष्ट या मानव अनुकूल के साथ हमारे डिफ़ॉल्ट alt विशेषता को भी ओवरराइड करें।

आदेश महत्वपूर्ण है! एम्बर उनके प्रकट होने के क्रम में विशेषताओं को लागू करता है। पहले विशेषता को डिफ़ॉल्ट alt वैल्यू असाइन करने से पहले (आवेदन करने से पहले ...attributes ), हम स्पष्ट रूप से कॉल करने वाले को आवश्यक उपयोग के मामले के अनुसार अधिक विशिष्ट alt विशेषता प्रदान करने का अवसर प्रदान करते हैं।

चूंकि उत्तीर्ण alt एट्रिब्यूट (यदि कोई मौजूद है) हमारे बाद दिखाई देगा, तो यह हमारे द्वारा निर्दिष्ट मूल्य को ओवरराइड करेगा। दूसरी ओर, यह महत्वपूर्ण है कि हम src , width और height बाद असाइन करें ... विशेषताएँ ताकि वे गलती से आक्रमणकारी द्वारा अधिलेखित न हों।

src विशेषता मैपबॉक्स स्थिर छवि एपीआई के लिए URL प्रारूप में सभी आवश्यक मापदंडों को this.token , जिसमें URL- सुरक्षित टोकन this.token ।

अंत में, चूंकि हम @2x "रेटिना" छवि का उपयोग कर रहे हैं, हमें width और height विशेषताओं को निर्दिष्ट करना होगा। अन्यथा, <img> जितना हमने उम्मीद की थी उससे दोगुना प्रदर्शित किया जाएगा!

हमने एक घटक में बहुत सारे कोड जोड़े हैं, तो चलो कुछ परीक्षण लिखते हैं! विशेष रूप से, हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे पास ओवरराइड HTML विशेषताओं के व्यवहार के लिए परीक्षण कवरेज है, जिसकी हमने ऊपर चर्चा की थी।

ध्यान दें कि qunit-dom से hasAttribute हेल्पर hasAttribute नियमित अभिव्यक्तियों के उपयोग का समर्थन करता है। , , src https://api.mapbox.com/ ( , ). , , .

… .

, ! , ? , <Map> <Rental> :

!

...

, , config/environment.js MAPBOX_ACCESS_TOKEN . ! , Ember-.

<Rental> , <Map> .

- (auto-track)

<Map> src <img> , . — JavaScript .

JavaScript API this.args.* . , URL .

...

this.args — API, Glimmer. (, «» ) (legacy) , API JavaScript .

! !

, @tracked . , , Ember .

, , , . , src lat , lng , width , height zoom this.args . , , , {{this.src}} .

Ember , . @tracked , Ember , (invalidate) , «» . (auto-track). , this.args ( , this.args.* ), @tracked Glimmer. , (Just works).

JavaScript

, :

API this.setProperties , .

, . ( !).

this , render . «» . .

!

<Rental> . , :

:

• (model hook)
• (mocking) JSON
• (remote)
• {{#each}}

<Rental> . , , , , . .

, , . , .

, Ember — . , , .

. app/routes/index.js :

, , . Route . , .

Route IndexRoute, , .

. ? model() . .

, . Ember , . , , ( ).

, . , async . await . ( : , Promise Javascript )

. , , JavaScript ( POJO (Plain Old Javascript Object)).

, , , . @model . POJO, .

, , title :

, .

अद्भुत!

, , , , , ! <Rental> , .

.

-, <Rental> @rental . <h1> , , :

@model <Rental> @rental , «Grand Old Mansion» <Rental> ! , @rental .

, «Grand Old Mansion», , .

, : , .

, , , , .

<Rental> . , setProperties , .

, <Rental> render @rental . , !

(mocking) JSON

, , , , , !

, , , API. , API . JSON . , JSON HTTP- — , API, — - . कूल!

? , JSON .zip. public .

, public :

 public ├── api │ ├── rentals │ │ ├── downtown-charm.json │ │ ├── grand-old-mansion.json │ │ └── urban-living.json │ └── rentals.json ├── assets │ └── images │ └── teaching-tomster.png └── robots.txt 4 directories, 6 files 

, , URL http://localhost:4200/api/rentals.json .

«» JSON. !

(remote)

. , .

?

, Fetch API JSON API /api/rentals.json , URL, .

, . Fetch API , fetch async , . , await .

Fetch API . , ; , JSON, json() . , await .

, , .

JSON:API , , .

-, JSON:API , "data" , . ; , , , — , .

, , . type id , (!). , , attributes .

, , , , : , , type , - . type "Standalone" "Community", , <Rental> .

JSON:API. .

:

(parsing) JSON attributes , type , . , , - .

! .

(helper) {{#each}}

, , — index.hbs , <Rental> . @rental @model . , @model — ()! , , .

.

{{#each}}...{{/each}} , . — — . — <Rental> , <li> .

{{rental}} . rental ? , ! as |rental| each . - , as |property| , {{property}} .

, .

हुर्रे! , . fetch . , ?

, !

( 1.1 1.2)

Ember!

Ember, .

#Emberjs. Discord , ember_js

जब आप वापस लौटेंगे, तो हम इस बात पर भरोसा करेंगे कि हमने पहले भाग में क्या सीखा, और एक नए स्तर पर आगे बढ़ें!

अद्यतन: और त्रुटि सुधार के लिए उपयोगकर्ता MK1301 को ध्वस्त करना।