हमने अंतिम वीडियो में हैंडलबार्स के साथ टेम्प्लटिंग को कवर किया। लेकिन हैंडलबार ब्लॉक पर एकमात्र अस्थायी समाधान नहीं है। इस वीडियो में हम अंडरस्कोर में उपलब्ध टेम्प्लेटिंग का उपयोग करेंगे।
क्यों? वैसे एक कारण यह है कि आप पहले से ही अपने प्रोजेक्ट पर अंडरस्कोर का उपयोग कर रहे होंगे। यह एक अत्यंत लोकप्रिय पुस्तकालय है क्योंकि, jQuery की तरह, यह क्रॉस-ब्राउज़र काम करने वाले उपयोगी तरीकों का एक गुच्छा प्रदान करता है। जैसा वे कहते हैं:
यह jQuery के tux, और Backbone.js के सस्पेंडर्स के साथ जाने के लिए टाई है।
यदि आप पहले से ही अंडरस्कोर का उपयोग कर रहे हैं, तो इसका उपयोग करने के लिए एक बहुत बड़ा प्रोत्साहन होगा।
इसके अलावा मेरे त्वरित परीक्षण में, हैंडलबार्स 1.0.0 14.2 KB gzipped और minified है और अंडरस्कोर 4.9 KB gzipped और minified है। हैंडलबार्स में बस अधिक विशेषताएं हैं (जैसे टिप्पणी, लूप, पथ, तर्क, आदि)। हमारे सरल डेमो में, हमें वैसे भी उन विशेषताओं की आवश्यकता नहीं है, इसलिए यह बिल्कुल उचित तुलना नहीं है, लेकिन अच्छी तरह से हम सिर्फ सीख रहे हैं।
HTML में टेम्पलेट होने के बजाय, हमें जावास्क्रिप्ट में अंडरस्कोर टेम्प्लेट को परिभाषित करने की आवश्यकता है। हम कुछ स्ट्रिंग संघनन के लिए वापस आ गए हैं।
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledफिर एक फ़ंक्शन में बदल जाता है जिसे हम अपने डेटा ऑब्जेक्ट संदर्भ के साथ कॉल कर सकते हैं और HTML को उस डेटा से भर दिया जाता है। कुशल होने के लिए, हम HTML को संक्षिप्त करने जा रहे हैं जो एक बड़ी स्ट्रिंग में लौटता है ताकि हम इसे केवल एक बार DOM पर जोड़ सकें:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);इस वीडियो में हमने डेटा प्राप्त करना भी छोड़ दिया है। हमने एक JSON स्रोत बनाया, और इसे प्राप्त करने के लिए jQuery के $ .getJSON () फ़ंक्शन का उपयोग किया। जैसे हमें शायद "वास्तविक जीवन" में करना होगा।
$.getJSON("/path/to/json.js", function(data) ( ));हमारे लूप और इस तरह के डेटा पर निर्भर रहने वाले कॉलबैक में जाते हैं। या अधिक संभावना है, कुछ अन्य सुविचारित फ़ंक्शन को संभालता है, जो चीजों को सफाई से अलग रखते हैं।
यहाँ हम कहाँ समाप्त हुए:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन इपनाड देखें
यह ध्यान दिया जाना चाहिए कि जो हमने यहां किया है, उसके साथ LoDash 100% संगत है। मुझे यकीन नहीं है कि अगर LoDash templating किसी भी बेहतर / तेज / धीमी / अंडरस्कोर की तुलना में खराब है, लेकिन मैंने पुस्तकालयों को स्वैप किया और डेमो ने ठीक काम किया।