इन दिनों हर जगह जटिल जावास्क्रिप्ट एप्लिकेशन देखे जा सकते हैं। समय के साथ, वे और अधिक जटिल हो जाते हैं और यह केवल jQuery में कॉलबैक फ़ंक्शन की एक श्रृंखला लिखने के लिए स्वीकार्य नहीं है। जावास्क्रिप्ट प्रोग्रामर धीरे-धीरे सीखेंगे कि दशकों के लिए सामान्य डेवलपर्स क्या जानते हैं। संगठन और दक्षता विकास में महत्वपूर्ण भूमिका निभा सकते हैं। इस प्रकार, बैकबोन, नॉकआउट और एम्बर जैसे जावास्क्रिप्ट एमवीसी ढांचे शुरुआती, मध्यवर्ती और अनुभवी डेवलपर्स के बीच शून्य को भरने के लिए दिखाई दिए। वे विभिन्न विशेषताओं और कार्यक्षमता प्रदान करते हैं जो विभिन्न लोगों को उनकी आवश्यकताओं के आधार पर सूट करेंगे।
मैं खुद को बहुत अच्छा डेवलपर मानता हूं ... सबसे अच्छे से दूर हूं, लेकिन मैं मौजूदा प्रौद्योगिकियों के साथ काम कर सकता हूं जो मैं अपने विकास में उपयोग करता हूं। मैंने इन रूपरेखाओं का पालन किया और बैकबोन और एम्बर ने मुझसे संपर्क किया। मैंने बैकबोन के साथ खेला, यहां तक कि एक वीडियो ट्यूटोरियल भी खरीदा। वह अच्छा है, लेकिन मेरे लिए अभी भी उसके लिए खुद को सोचने के लिए मजबूर करना मुश्किल है। मैंने कुछ महीने पहले ही एम्बर के बारे में सुना था और यह रफ्तार पकड़ रहा है। यह कई विशेषताएं प्रदान करता है जिनकी मुझे आवश्यकता है और मैंने यह देखने का फैसला किया कि यह मुझे कैसे सूट करता है। एम्बर कई प्रमुख विशेषताएं प्रदान करता है जो मुझे बहुत आकर्षक लगती हैं, मुख्य एक डेटा बाइंडिंग है। आप बस एक वैरिएबल बनाते हैं, और जब इस वैरिएबल का मान बदलता है, तो आपके अनुप्रयोग का कोई भी हिस्सा जो इस वैरिएबल को मॉनिटर करता है, अपडेट किया जाता है। यह उसका आवेदन, उदाहरण के लिए, चैट रूम आदि में मिलेगा।
फिलहाल, बैकबोन की तुलना में एम्बर का मुख्य दोष यह है कि उत्तरार्द्ध में बहुत सारे ट्यूटोरियल, लेख और तैयार परियोजनाएं हैं। एम्बर पर रहते हुए आप नेटवर्क पर बहुत कम सामग्री पा सकते हैं जो तुरंत अपने सभी इनसाइड दिखाते हैं, लेकिन बहुत मूल बातें याद आती हैं। इसलिए मेरा लक्ष्य है कि आप एम्बर का उपयोग शुरू करने में मदद करने के लिए एक ट्यूटोरियल लिखें। खैर, अन्य बातों के अलावा, मैं अपने स्वयं के ज्ञान को मजबूत करने के लिए यह लेख लिख रहा हूं।
Ember.js MVC (मॉडल-व्यू-कंट्रोलर) आर्किटेक्चर पर बनाया गया है और आपको बस अपने कोड को 3 भागों में विभाजित करना है:
- एम = मॉडल - एक सरणी की तरह दिखता है। यह वह जगह है जहां आपके एप्लिकेशन द्वारा उपयोग किया जाने वाला डेटा संग्रहीत किया जाता है।
- V = प्रस्तुति आपके आवेदन का दृश्य भाग है - प्रपत्र, सूची इत्यादि।
- C = नियंत्रक - यातायात नियंत्रक के रूप में नियंत्रक के बारे में सोचें। यह एप्लिकेशन के अन्य भागों के बीच परस्पर क्रिया को नियंत्रित करता है। जब उपयोगकर्ता बटन पर क्लिक करता है, तो नियंत्रक निर्धारित करता है कि किस दृश्य को लोड किया जाना चाहिए, जो बदले में यह निर्धारित करता है कि डेटा को बचाने के लिए किस मॉडल का उपयोग करना है।
अच्छा, शुरू करते हैं? आरंभ करने के लिए,
Ember.js स्टार्टर किट डाउनलोड करें। इसे उस निर्देशिका में अनज़िप करें, जिसका वेब ब्राउज़र से एक्सेस है। अपने पसंदीदा टेक्स्ट एडिटर में
index.html और
js/app.js खोलें।
app.js में निम्न पंक्ति जोड़ें:
Welcome = Ember.Application.create();
बधाई! आपने एम्बर पर अपना पहला ऐप बनाया है! अपने ब्राउज़र में
index.html खोलें और अपनी नई साइट के साथ खुश रहें। ओह रुको, वहाँ कुछ भी नहीं है ... आप इस बारे में क्या सोचते हैं? हेडलाइन के अलावा कुछ भी नहीं दिखाई दिया, और यह ठीक है। यह सब हुआ कि एम्बर ने एक एप्लिकेशन बनाया जिसे आप पूरे पाठ में उपयोग करेंगे। कुछ डेवलपर्स इसे नामस्थान कहना पसंद करते हैं। इसका सिर्फ यह मतलब है कि आपके द्वारा चुने गए नाम से आपके आवेदन के अन्य सभी हिस्से शुरू हो जाएंगे। यह चर नामों के संघर्ष से बचने में मदद करता है और सब कुछ क्रम में रखता है।
एक बात यह है कि ज्यादातर jQuery डेवलपर्स बहुत अच्छे हैं - पहले से ही अच्छे पुराने
document.ready । एम्बर कुछ समान प्रदान करता है,
create विधि में एक वैकल्पिक वस्तु को स्वीकार करता है। कोड जोड़ें, पृष्ठ को फिर से लोड करें और आपको एक बधाई देखना चाहिए। अपने आप को सिर पर रख लें ... आप इसके लायक हैं!
Welcome = Ember.Application.create({ ready: function(){ alert(' !'); } });
अगली चीज़ जो हमें करने की ज़रूरत है वह है मॉडल को जोड़ना। एम्बर पर प्रत्येक एप्लिकेशन में कई मॉडल हो सकते हैं और उनमें से प्रत्येक एक अद्वितीय डेटा प्रकार है। कुछ रूपरेखाओं में, मॉडल को एक वर्ग के रूप में दर्शाया गया है। सब सब में, यह सिर्फ एक संरचना है जो हमें बताती है कि इस वस्तु के साथ कैसे काम किया जाए। आइए मेरी कुछ पसंदीदा पुस्तकों के लिए एक मॉडल बनाएं।
Welcome.Book = Ember.Object.extend({ title: null, author: null, genre: null });
अगली चीज जो हमें चाहिए वह है एक नियंत्रक। वैसे, एप्लिकेशन को प्रबंधित करने के अलावा, एम्बर में नियंत्रक भी मॉडल से दृश्य में डेटा स्थानांतरित करते हैं। यहाँ एम्बर पर एक सरल नियंत्रक है:
Welcome.booksController = Ember.ArrayController.create();
यह एक नियंत्रक बनाने की तरह बिल्कुल नहीं है, लेकिन यह एक सरणी बनाता है जिसमें एक सरणी है। यह वह जगह है जहाँ हमारी पुस्तकों के बारे में जानकारी संग्रहीत की जाएगी। वह वहां है, आप उसे नहीं देखते हैं। आप सरणी की सामग्री को स्पष्ट रूप से निर्दिष्ट कर सकते हैं, या, उदाहरण के लिए, इसे भरें। यह एक वैकल्पिक वस्तु को
create विधि को पारित करके पूरा किया जाता है:
Welcome.booksController = Ember.ArrayController.create({ content: [] });
अब हमारे पास एक मॉडल और एक नियंत्रक है - वह सब जो एक दृश्य लिखना है। याद रखें, मैंने कहा कि प्रस्तुति आपके आवेदन का एक दृश्य हिस्सा है? तो यह
index.html फ़ाइल में होगा। आइए पहले हमारी प्रस्तुति लिखें और फिर इस पर चर्चा करें।
H1 टैग के तहत, निम्नलिखित जोड़ें:
<script type="text/x-handlebars"> {{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} <b>{{content.title}}</b> - {{content.author}}, <i>{{content.genre}}</i> {{/collection}} </script>
एम्बर की एक बड़ी खासियत यह है कि यह बिल्ट-इन हैंडलबार्स टेम्पलेट इंजन के साथ आती है। अनिवार्य रूप से, टेम्पलेट एम्बर का प्रमुख जादू है। आमतौर पर टेम्प्लेट में आप कुछ स्ट्रिंग के साथ एक चर को घेरते हैं। हैंडलबार्स में, ये 2 घुंघराले ब्रेसिज़ हैं।
एम्बर ने अपने ऑनलाइन अनुप्रयोगों जैसे मोबाइल मी के लिए ऐप्पल द्वारा विकसित स्प्राउटकोर लाइब्रेरी के रूप में अपना अस्तित्व शुरू किया। स्प्राउटकोर ने उन विगेट्स का एक सेट भी शामिल किया, जो एम्बर में नहीं हैं। एम्बर में केवल फार्म तत्वों के लिए प्रस्तुतियाँ शामिल हैं, क्योंकि वे बहुत गतिशील हो सकते हैं। हमारे टेम्पलेट, या प्रस्तुति के मामले में, हम एम्बर बटन का उपयोग करते हैं। इससे वह हमारे लिए सारी मेहनत कर सकता है। यह उद्देश्य (हमारे मामले में,
booksController ) और कार्रवाई करता है। इसलिए, जब कोई बटन पर क्लिक करता है, तो एम्बर
loadBooks ऑब्जेक्ट के
loadBooks विधि के साथ काम करेगा।
दूसरा भाग थोड़ा अधिक जटिल है, लेकिन मुझे यकीन है कि आप इसका पता लगा लेंगे। एम्बर में, एक संग्रह केवल डेटा समूह के लिए एक संकेतक है, हमारे मामले में यह फिर से
Welcome.booksController । लेख की शुरुआत में, मैंने लिखा था कि संबंधित डेटा उन कारणों में से एक है जो एम्बर ने मुझे दिलचस्पी दी। और यहाँ हम इसकी सारी शक्ति देख सकते हैं।
Content बस
booksController में
content वैरिएबल को
booksController , जबकि
Binding मैजिक डस्ट है। अधिकांश विशेषताओं के अंत में
Binding को जोड़ना एम्बर को बताता है कि आप दो तरफा बंधन करना चाहते हैं। आप एक तरफ मूल्य को बदलते हैं और दूसरे को अपडेट किया जाएगा। अंत में, संग्रह आपको आधार टैग सेट करने की अनुमति देते हैं, हमारे मामले में यह केवल एक बुलेटेड सूची (
UL टैग) है।
वैसे, प्रतीक
# और
/ हैंडलबर्स को बताते हैं कि यह दृश्य का केवल एक हिस्सा (ब्लॉक) है।
संग्रह के अंदर हमारे टेम्पलेट्स का "मांस" है। ध्यान दें कि हम अपने टेम्प्लेट के अंदर HTML और टैग कैसे मिलाते हैं। सुविधाजनक है, है ना? एक और सूक्ष्मता यह है कि एम्बर को सूची के लिए खुलने या बंद करने के लिए स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं है। वह उन्हें स्वचालित रूप से जोड़ देगा क्योंकि वह जानता है कि हम बुलेट सूची का उपयोग कर रहे हैं। एप्लिकेशन लॉन्च करें और आपको एक अकेला बटन दिखाई देगा, जिसमें मित्रों की आवश्यकता होगी। एक बटन दबाने से यह दुखी हो जाता है, क्योंकि हमारे पास अभी तक
loadBooks विधि नहीं है। कैसे इसे जोड़ने और कुछ डेटा लोड करने के बारे में?
Welcome.booksController = Ember.ArrayController.create({ content: [], loadBooks: function(){ var self = this; $.getJSON('data/books.json', function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });
याद रखें, हमने कहा कि मॉडल में मनमाने तरीके हो सकते हैं? एम्बर में सबकुछ में मनमाना कोड हो सकता है, जिसमें
ArrayController भी
ArrayController । अब, जब आप अपने पृष्ठ को लोड करते हैं और "लोड बुक्स"
loadBooks , तो
loadBooks विधि को बुलाया जाएगा, जो मेरी कुछ पसंदीदा पुस्तकों को लोड करेगी। यह सब इस सरल उदाहरण के लिए है। मुझे उम्मीद है कि आपको अच्छा लगा होगा और आप एम्बर को मौका देंगे। आप
Github पर नमूना स्रोत कोड डाउनलोड कर सकते हैं।
एक और मिनट रुको। यदि आप मेरे जैसे हैं, तो आपके पास अभी भी प्रश्न हैं। ढेर सारे सवाल। मैंने यह लेख लिखा था क्योंकि सवाल थे और मुझे जवाब खोजने में घंटों लग गए। वास्तव में, अधिकांश प्रश्नों के उत्तर जिन्हें मैंने इस लेख में कवर किया है। यदि आपके पास अभी भी प्रश्न हैं, तो आप
उन्हें यहां लिख सकते
हैं । अगर मुझे जवाब नहीं पता है, तो मैं इसे ढूंढूंगा और आपको जवाब दूंगा।
मैं आपको
मेरा दूसरा लेख पढ़ने की सलाह देता
हूं , जिसमें एम्बर बहुत अधिक विस्तार से कवर किया गया है।