हमने पिछले वीडियो में थोड़ी गड़बड़ के साथ छोड़ दिया। जावास्क्रिप्ट के सभी एक ब्लॉक में हम डेटा पुनर्प्राप्ति, प्रदर्शन और व्यापार तर्क, और अस्थायी मिश्रण कर रहे थे। इस वीडियो में हम उन चीजों को तोड़ना शुरू करने जा रहे हैं जो हमें अधिक संगठित, बनाए रखने योग्य और समझने योग्य कोड के लिए हमारे रास्ते पर लाने के लिए हैं। उस का एक बड़ा हिस्सा अस्थायी है।
हमारे टेंपलेटिंग एडवेंचर पर # 1 हाथलेबार के साथ है। हैंडलबार्स में एक चतुर दृष्टिकोण है कि टेम्पलेट के लिए HTML को शाब्दिक रूप से HTML में डाल दिया गया है। आप एक विशेष टैग का उपयोग करते हैं । यह अच्छी संलेखन के लिए बनाता है क्योंकि हम स्ट्रिंग संगति (उन सभी उद्धरणों और plusses) की भद्दापन से दूर हो सकते हैं और अपने संपादक द्वारा प्रदान किए गए HTML के लिए अच्छा वाक्यविन्यास हाइलाइटिंग प्राप्त कर सकते हैं। हमारा टेम्प्लेट अंततः इस तरह दिखता था:
((movieTitle))
((movieDirector))
typeस्क्रिप्ट टैग पर अजीब विशेषता नोट करें । यह उस टैग की सामग्री को क्रियान्वित करने से रोकता है। अंततः हैंडलबार्स ने इस टैग की हिम्मत को कम कर दिया और इसे एक टेम्प्लेट फ़ंक्शन में बदल दिया। वास्तव में इसे संभालने के लिए बहुत चालाक तरीका है।
जैसे बिट्स ((movieTitle))महत्वपूर्ण भाग हैं। हम अंततः टेम्प्लेटिंग फ़ंक्शन के लिए एक ऑब्जेक्ट पास करते हैं जो बनाया जाता है, और उस ऑब्जेक्ट के गुण इन प्लेसहोल्डर बिट्स से मेल खाते हैं। हैंडलबार्स को संभवत: हैंडलबार नाम दिया गया है, क्योंकि उन प्लेसहोल्डर बिट्स घुंघराले ब्रेसिज़ में लिपटे हुए हैं जो ऊपर से हैंडलबार्स की तरह दिखते हैं।
हैंडलबार्स वेबसाइट पर सरल ट्यूटोरियल के बाद, हम अपने टेम्प्लेटिंग फंक्शन को इस तरह बनाते हैं:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);फिर हमारे forलूप के भीतर , हम अपने नए टेम्प्लेटिंग फ़ंक्शन को ऑब्जेक्ट (संदर्भ) के साथ कहते हैं जिसमें एक एकल फिल्म होती है। HTML लौटा दी जाएगी, और हम इसे पृष्ठ पर भेज देते हैं।
var html = template(data.movies(i)); $("#movies").append(html);हम इस वीडियो में टेम्पलेट भी लेते हैं और इसे एक अलग पेन पर मूवी देते हैं। यह सिर्फ इस बात का द्योतक है कि आप वास्तविक परियोजना में अपने स्वयं के कोड को कैसे तोड़ेंगे। टेम्पलेट लगभग निश्चित रूप से किसी प्रकार का "शामिल" होगा।
यहाँ हम कहाँ समाप्त हुए:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन mdCjJ देखें
हमने यहां बेहतर कोड की ओर कुछ अच्छी प्रगति की है, लेकिन हमारे पास इसे पूरी तरह से साफ करने के लिए और अधिक है।