परिचय

JQuery के टेम्प्लेट प्लगइन एक "टेम्पलेट इंजन" है जो क्लाइंट पर jQuery एक्सटेंशन के रूप में काम करता है।

यह प्लगइन ब्राउज़र में डेटा प्रदर्शित करने में मदद करता है जो जावास्क्रिप्ट ऑब्जेक्ट्स और एरेज़ में है, जो आपको HTML कोड बनाने के नियमित संचालन से बचाता है, विशेष वर्णों से बच रहा है, आदि। इसके अलावा, इसकी बहुत दिलचस्प क्षमताएं हैं - उदाहरण के लिए, यह आपको स्रोत डेटा को बदलते समय इसकी मदद से बनाए गए HTML कोड को अपडेट करने की अनुमति देता है।

बेशक, jQuery के टेम्प्लेट केवल और केवल "टेम्पलेट इंजन" नहीं हैं, लेकिन वैकल्पिक विकल्पों पर इसका एक बड़ा फायदा है - jQuery टीम से समर्थन। यह हमें डरने की अनुमति नहीं देता है कि इस प्लगइन को छोड़ दिया जाएगा, और जब ब्राउज़र के नए संस्करण जारी किए जाते हैं तो विभिन्न समस्याएं उत्पन्न होती हैं।

इस लेख में मैं jQuery के टेम्प्लेट की मुख्य विशेषताओं के बारे में बात करूंगा और विभिन्न परिदृश्यों में इसके काम को प्रदर्शित करूंगा, और बाद के लेखों में मैं उन कार्यों के बारे में बात करूंगा जो मुख्य प्लग-इन कोड ( jQuery टेम्प्लेट प्लस ) और टेम्पलेट भाषा के विस्तार में शामिल नहीं हैं।

थोड़ा इतिहास

यह प्लगइन Microsoft पर माइक्रो-टेम्प्लेटिंग लाइब्रेरी (लेखक - जॉन रेजिग ) के आधार पर विकसित किया गया था, विकास पर कुछ विवरण स्टीफन वाल्थर द्वारा ब्लॉग पोस्ट में पाया जा सकता है " एक परिचय jQuery के टेम्पलेट के लिए " और जॉन रेजिग के पोस्ट " टेंपलेटिंग सिंटैक्स " से jQuery फोरम। पिछले अक्टूबर से, jQuery के टेम्प्लेट , jQuery डेटालिंक और jQuery ग्लोबलाइज़ेशन प्लगइन्स jQuery प्रोजेक्ट का हिस्सा बन गए हैं।

भाग एक, सैद्धांतिक

काम पर लगना

चलिए शुरू करते हैं। निम्न उदाहरण सरणी में निर्दिष्ट फिल्मों की सूची दिखाता है (उदाहरण के लिए पूर्ण कोड BasicSample1.htm फ़ाइल में है):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>  (1)</title> <link href="Styles/Default.css" rel="Stylesheet" type="text/css" /> <script src="Scripts/jquery-1.5rc1.js" type="text/javascript"></script> <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script> <script src="DataItems.js" type="text/javascript"></script> <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> <h2> ${title} </h2> <p> : ${director}<br />  : ${actors}<br /> : ${year} </p> </div> </div> </script> <script type="text/javascript"> $(function () { $('#movieTmpl').tmpl(dataItems).appendTo('#movieListBag'); }); </script> </head> <body> <h1>  (1)</h1> <div id="movieListBag"> </div> </body> </html>

और यहाँ वह है जो आप ब्राउज़र में देखेंगे:

आइए इस उदाहरण को विस्तार से देखें।

तो पहली बात मैं jQuery कोर पुस्तकालय और jQuery टेम्पलेट्स कनेक्ट है:

 <script src="Scripts/jquery-1.5rc1.js" type="text/javascript"></script> <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>

पहले यह दोहराया गया था कि jQuery के टेम्प्लेट jQuery कोर लाइब्रेरी में शामिल किए जाएंगे - लेकिन 24 जनवरी को जारी jQuery 1.5 RC1 में, टेम्प्लेट अभी भी गायब हैं।

फिर मैंने फिल्म सूची लोड की:

 <script src="DataItems.js" type="text/javascript"></script>

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

DataItems.js फ़ाइल के अंदर इस प्रकार है:

 var dataItems = [ { title: '', thumbnail: 'Bandits.jpg', director: ' ', actors: [' ', '  ', ' '], year: 2001, budget: 95000000, grossRevenue: 67631903, rating: 0, frames: ['Bandits-1.jpg', 'Bandits-2.jpg', 'Bandits-3.jpg', 'Bandits-4.jpg', 'Bandits-5.jpg'] }, ...

एक टेम्पलेट बनाने के लिए अगला कदम है:

 <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> <h2> ${title} </h2> <p> : ${director}<br />  : ${actors}<br /> : ${year} </p> </div> </div> </script>

कृपया ध्यान दें कि टेम्पलेट SCRIPT टैग में रखा गया है, और मैं MIME प्रकार के रूप में टेक्स्ट / x-jquery-tmpl निर्दिष्ट करता हूं। दस्तावेज़ को पार्स करते समय एक अज्ञात MIME प्रकार का सामना करने के बाद, ब्राउज़र SCRIPT टैग की सामग्री की व्याख्या करने की कोशिश नहीं करता है, जो मुझे चाहिए।

सामान्यतया, एक टेम्प्लेट को किसी भी टैग में रखा जा सकता है, उदाहरण के लिए, DIV टैग में:

 <div id="movieTmpl" style="display: none"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> <h2> ${title} </h2> <p> : ${director}<br />  : ${actors}<br /> : ${year} </p> </div> </div> </div>

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

उदाहरण के लिए, उपर्युक्त उदाहरण के लिए, कोई भी चित्र नहीं अपलोड करने का प्रयास किया जाएगा:

लेकिन मेज के साथ मामला बहुत अधिक दिलचस्प हो सकता है (इस उदाहरण के लिए TEHEK के लिए बहुत धन्यवाद!)

 <div id="movieTmpl" style="display: none"> <table> <tbody> {{each dataItems}} <tr> <td>${title}</td> <td>${director}</td> <td>${year}</td> </tr> {{/each}} </tbody> </table> </div>

इंटरनेट एक्सप्लोरर और ओपेरा इस कोड को सही ढंग से संसाधित करेंगे:

लेकिन क्रोम और फायर फॉक्स ने टेबल के बाहर अतिरिक्त कोड "धक्का" दिया, जिसके परिणामस्वरूप तालिका खाली हो जाएगी ... हैप्पी डीबगिंग! ;-)

सेलेक्ट टैग के लिए, एक समान पैटर्न देखा जाएगा।

विकसित होने पर, मैं IntelliSence के सभी विलंब का लाभ उठाने के लिए DIV टैग में टेम्प्लेट रखने की सलाह देता हूं, और फिर उन्हें SCRIPT टैग में ले जाता हूं।

और अंत में, मैं निम्नलिखित कॉल के साथ टेम्पलेट को त्वरित करता हूं:

 $('#movieTmpl').tmpl(dataItems).appendTo('#movieListBag');

इस मामले में क्या होता है, मुझे नीचे दिए गए चित्र में दिखाया गया है:

तो:

.Tmpl () विधि को टेम्प्लेट का पाठ मिलता है - अर्थात $ ('# मूवीटमप्ल') कहकर प्राप्त किए गए एक तत्व का आंतरिक पाठ ।
टेम्पलेट का पाठ संकलित किया गया है - इसके आधार पर एक जावास्क्रिप्ट फ़ंक्शन बनाया गया है।
एक "टेम्पलेट उदाहरण" बनाया जाता है - एक ऑब्जेक्ट जिसमें डेटा तत्व ( डेटा फ़ील्ड) के लिए एक लिंक होता है, .tmpl () विधि के तर्क के रूप में पारित किया जाता है। आप एक सरणी, ऑब्जेक्ट, नल को .tmpl () विधि से पारित कर सकते हैं, या बिना तर्क के इसे कॉल कर सकते हैं। यदि आप एक सरणी पास करते हैं, तो सरणी के प्रत्येक तत्व के लिए टेम्पलेट का अपना उदाहरण बनाया जाएगा जो इस तत्व को संदर्भित करता है, अन्य सभी मामलों में केवल एक उदाहरण बनाया जाएगा।
संकलित टेम्प्लेट फ़ंक्शन को कहा जाता है, जिसमें उदाहरण ऑब्जेक्ट पास किया जाता है। फ़ंक्शन टेम्प्लेट का पाठ लौटाता है जिसमें सभी प्रतिस्थापन होते हैं।
पिछले चरण में प्राप्त पाठ HTML तत्वों के संग्रह में परिवर्तित हो जाता है। इन तत्वों के लिंक इंस्टेंस ऑब्जेक्ट ( नोड्स फ़ील्ड) में भी संग्रहीत किए जाते हैं, जो स्रोत डेटा में बदलाव ("डायनामिक अपडेट" अनुभाग देखें) के बाद टेम्पलेट के "आउटपुट" को अपडेट करना आसान बनाता है।
अंत में, .tmpl () विधि HTML तत्वों का एक jQuery संग्रह लौटाती है जिसे दस्तावेज़ में appendTo ('# movieListBag') कहकर जोड़ा जाता है।

भाव

$ {...} टैग का उपयोग टेम्प्लेट में मूल्यों को बदलने के लिए किया जाता है। इस टैग के अंदर, आप .tmpl () विधि और किसी भी मान्य जावास्क्रिप्ट एक्सप्रेशन के लिए पास किए गए ऑब्जेक्ट की संपत्ति का नाम दोनों को निर्दिष्ट कर सकते हैं, जिसमें एक फ़ंक्शन कॉल भी शामिल है।

किसी ऑब्जेक्ट (सरणी तत्व) के गुणों का उपयोग करना:

 <h2> ${title} </h2>

जावास्क्रिप्ट एक्सप्रेशंस का उपयोग करना:

 <p> : $${(budget / 1000000).toFixed(0)} .<br /> : $${(grossRevenue / 1000000).toFixed(1)} . </p>

टेम्पलेट उदाहरण फ़ील्ड्स और विधियाँ

भाव के अंदर, आप $ आइटम चर के माध्यम से टेम्पलेट के वर्तमान उदाहरण तक पहुंच सकते हैं, और वर्तमान डेटा आइटम तक पहुंचने के लिए $ डेटा चर का उपयोग कर सकते हैं।

प्रत्येक टेम्पलेट उदाहरण में निम्नलिखित फ़ील्ड शामिल हैं:

डेटा - इसमें टेम्पलेट उदाहरण से जुड़े डेटा तत्व का लिंक होता है;
tmpl - रेंडरिंग के लिए उपयोग किए गए संकलित टेम्पलेट का लिंक है;
पैरेंट - यदि {{tmpl}} टैग का उपयोग करके टेम्प्लेट को दूसरे टेम्प्लेट से बुलाया जाता है, तो टेम्प्लेट के "पैरेंट" उदाहरण के लिए एक लिंक होता है;
नोड्स - रेंडर करने के बाद, टेम्पलेट लागू करने के परिणामस्वरूप उत्पन्न HTML तत्वों के लिंक होते हैं।

इसके अलावा, .tmpl () विधि दो तर्कों को स्वीकार करती है - डेटा और विकल्प । आप डेटा तर्क के साथ पहले ही मिल चुके हैं, डेटा तत्व का एक लिंक इसके माध्यम से पारित किया जाता है। और विकल्प तर्क का उपयोग करके, आप ऑब्जेक्ट, सभी फ़ील्ड और विधियों के संदर्भ को पास कर सकते हैं, जो कि .tmpl () विधि में बनाए गए प्रत्येक टेम्पलेट में स्थानांतरित किया जाएगा।

निम्नलिखित इस पैरामीटर का उपयोग करने का एक उदाहरण है:

 <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> <h2> ${title} </h2> <p> : ${director}<br />  : ${actors}<br /> : ${year}<br /> : $${$item.formatBudget(budget)} .<br /> : $${$item.formatGrossRevenue(grossRevenue)} . </p> </div> </div> </script>

 $(function () { $('#movieTmpl') .tmpl( dataItems, { formatBudget: function (value) { return (value / 1000000).toFixed(0); }, formatGrossRevenue: function (value) { return (value / 1000000).toFixed(1); } }) .appendTo('#movieListBag'); });

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

और अंत में, टेम्पलेट उदाहरण में अपडेट () और HTML () विधियां शामिल हैं, जिनका उपयोग मैं बाद में दिखाऊंगा।

संकलित टेम्पलेट कैसा दिखता है?

आप यह देख सकते हैं कि संकलित टेम्पलेट .template () पद्धति का उपयोग करके कैसा दिखता है, जो टेम्पलेट्स को संकलित करता है। यह विधि एक फ़ंक्शन ऑब्जेक्ट देता है जिसकी सामग्री को देखना आसान है:

 $('#compiledTemplateBag').text('' + $('#movieTmpl').template());

संकलन के बाद ऊपर दिए गए उदाहरण में प्रयुक्त टेम्पलेट इस प्रकार है (पाठ बेहतर पठनीयता के लिए प्रारूपित किया गया है):

 function anonymous(jQuery, $item) { var $ = jQuery, call, _ = [], $data = $item.data; with ($data) { _.push('<div class="movie-bag"> <img src="Content/Thumbnails/'); if (typeof (thumbnail) !== 'undefined' && (thumbnail) != null) { _.push($.encode((typeof (thumbnail) === 'function' ? (thumbnail).call($item) : (thumbnail)))); } _.push('" class="thumbnail" /> <div class="base-info"> <h2> '); if (typeof (title) !== 'undefined' && (title) != null) { _.push($.encode((typeof (title) === 'function' ? (title).call($item) : (title)))); } _.push(' </h2> <p> : '); if (typeof (director) !== 'undefined' && (director) != null) { _.push($.encode((typeof (director) === 'function' ? (director).call($item) : (director)))); } _.push('<br />  : '); if (typeof (actors) !== 'undefined' && (actors) != null) { _.push($.encode((typeof (actors) === 'function' ? (actors).call($item) : (actors)))); } _.push('<br /> : '); if (typeof (year) !== 'undefined' && (year) != null) { _.push($.encode((typeof (year) === 'function' ? (year).call($item) : (year)))); } _.push(' </p> </div> </div>'); } return _; }

मुझे लगता है कि अब आपको यह समझना चाहिए कि $ {...} टैग में निर्दिष्ट अभिव्यक्तियों को कैसे संसाधित किया जाता है - और डीबगिंग करते समय यह समझ आपकी काफी मदद कर सकती है! तथ्य यह है कि jQuery के टेम्प्लेट टेम्प्लेट टेक्स्ट का अपेक्षाकृत सरल रूपांतरण करते हैं, इसलिए यदि आप अभिव्यक्ति में गलती करते हैं, तो त्रुटि संदेश रूपांतरण फ़ंक्शन के परिणामस्वरूप प्राप्त पाठ से संबंधित होगा और अक्सर बेहद अचिंतनीय हो सकता है।

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

खैर, शायद यह jQuery के टेम्पलेट्स के काम के बारे में कहानी है जो अपने व्यावहारिक अनुप्रयोग को पूरा करने और आगे बढ़ने के लायक है।

भाग दो, प्रैक्टिकल

स्थिति

कुछ शर्तों के आधार पर टेम्पलेट के कुछ हिस्सों को लागू करने के लिए, टैग {{if}} ... {{और}}} ... {{/ if}} का उपयोग jQuery के टेम्पलेट में किया जाता है।

निम्न उदाहरण इन टैग का उपयोग दिखाता है (उदाहरण के लिए पूर्ण कोड ifElseTag.htm फ़ाइल में है):

 <p> : {{if $item.data.media == 'dvd'}} <img src="Images/media-dvd.png" /> {{else $item.data.media == 'blue-ray'}} <img src="Images/media-blueray.png" /> {{else}} <img src="Images/media-unspecified.png" /> {{/if}} </p>

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

आप {{अगर}} और {{और}} टैग में किसी भी मान्य जावास्क्रिप्ट अभिव्यक्ति का उपयोग कर सकते हैं।

संग्रह प्रसंस्करण

टेम्प्लेट में संग्रह की प्रक्रिया के लिए, {{प्रत्येक}} ... {{/ प्रत्येक}} टैग का उपयोग करें। निम्न उदाहरण अभिनेताओं को सूचीबद्ध करने के लिए {{प्रत्येक}} टैग का उपयोग दिखाता है (उदाहरण के लिए पूर्ण कोड प्रत्येक TT1.1.htm में है ):

  : {{each actors}} ${$value} {{if $index < $data.actors.length - 1}} , {{/if}} {{/each}}

ब्राउज़र में, यह उदाहरण इस प्रकार है:

आप {{प्रत्येक}} टैग के तर्क के रूप में एक सरणी, ऑब्जेक्ट, या jQuery संग्रह पास कर सकते हैं। आंतरिक रूप से, {{प्रत्येक}} टैग jQuery.each () कॉल का उपयोग करता है, इसलिए सब कुछ जो jQuery.each () व्यवहार प्रलेखन कहता है, {{प्रत्येक}} टैग के लिए सही है। नीचे दिए गए उदाहरण में {{प्रत्येक}} टैग का उपयोग किसी वस्तु के सभी गुणों को प्रदर्शित करने के लिए किया गया है (प्रत्येक उदाहरण कोड प्रत्येक Tag2.htm फ़ाइल में है):

 <script id="objTmpl" type="text/x-jquery-tmpl"> <div> <dl> {{each $data}} <dt> ${$index} </dt> <dd> ${$value} </dd> {{/each}} </dl> </div> </script>

दो चर {{प्रत्येक}} टैग के अंदर उपलब्ध हैं: $ मूल्य , जिसमें वर्तमान सरणी तत्व का संदर्भ है, और $ सूचकांक , जिसमें वर्तमान सरणी तत्व या संपत्ति के नाम का सूचकांक शामिल है।

बेशक, आप {{प्रत्येक}} टैग के अंदर अन्य टैग का उपयोग कर सकते हैं, और इसके अलावा, $ आइटम और $ डेटा चर अभी भी आपके लिए उपलब्ध होंगे। उपर्युक्त उदाहरण में, {{if}} टैग के साथ वेरिएबल $ इंडेक्स और $ डेटा का उपयोग अभिनेताओं के नामों के बीच अल्पविराम प्रदर्शित करने के लिए किया जाता है - दुर्भाग्य से, चर $ अंतिम प्रदान नहीं किया गया है, हालाँकि यह बहुत उपयोगी होगा!

अंत में, यदि आपको अचानक ऐसी आवश्यकता है, तो आप डिफ़ॉल्ट चर नाम बदल सकते हैं। नीचे दिए गए उदाहरण में, इन नामों को myIndex और myValue में बदल दिया गया है (प्रत्येक उदाहरण कोड प्रत्येक Tag3.htm फ़ाइल में है):

  : {{each(myIndex, myValue) actors}} ${myValue} {{if myIndex < $data.actors.length - 1}} , {{/if}} {{/each}}

वैसे, केवल $ इंडेक्स वेरिएबल के लिए नाम बदलने की कोशिश से कुछ अच्छा नहीं होगा - कोई त्रुटि नहीं होगी, लेकिन आप वर्तमान मूल्य तक पहुंच प्राप्त नहीं कर सकते हैं!

नेस्टेड टेम्पलेट

टेम्प्लेट बहुत बड़े हो सकते हैं - और फिर उन्हें छोटी मात्रा के कई हिस्सों में विभाजित करने के लिए समझ में आता है या ऐसे भागों को दोहराना शामिल है जो एक अलग टेम्पलेट में अलग करने के लिए तार्किक हैं। JQuery के टेम्प्लेट में, यह नेस्टेड टेम्प्लेट्स का उपयोग करके किया जाता है जो {{tmpl}} टैग का उपयोग करके किए जाते हैं।

नीचे दिए गए उदाहरण से पता चलता है कि टेम्पलेट कोड का हिस्सा किसी अन्य टेम्पलेट में कैसे निकालना है (पूरा उदाहरण कोड NestedTemplates1.htm फ़ाइल में है):

 <script id="movieTmpl" type="text/x-jquery-tmpl"> ... <p> : ${director}<br />  : {{tmpl '#actorsTmpl'}}<br /> : ${year} </p> ... </script> <script id="actorsTmpl" type="text/x-jquery-tmpl"> {{each actors}} ${$value} {{if $index < $data.actors.length - 1}} , {{/if}} {{/each}} </script>

{{Tmpl}} टैग में कैश में पहले से संग्रहीत टेम्पलेट का jQuery चयनकर्ता या टेम्पलेट का नाम शामिल होना चाहिए। क्योंकि इस उदाहरण में, {{tmpl}} टैग में कोई अन्य तर्क नहीं है, नेस्टेड टेम्पलेट को माता-पिता के समान डेटा तत्व प्राप्त होगा - लेकिन इसका टेम्पलेट का अपना उदाहरण होगा, और इसमें मूल फ़ील्ड टेम्पलेट के मूल उदाहरण को संदर्भित करेगा।

निम्न उदाहरण नेस्टेड टेम्पलेट के लिए एक नया डेटा आइटम पास करने और टेम्पलेट के मूल उदाहरण के लिए एक लिंक का उपयोग करके प्रदर्शित करता है। जैसा कि .tmpl () पद्धति का उपयोग करने के मामले में, यदि आप नेस्टेड टेम्पलेट को कॉल करते समय एक सरणी निर्दिष्ट करते हैं, तो टेम्पलेट ऐरे के प्रत्येक तत्व के लिए लागू किया जाएगा (उदाहरण के लिए पूर्ण कोड NestedTemplates2.htm फ़ाइल में है):

 <script id="movieTmpl" type="text/x-jquery-tmpl"> ... <p> : ${director}<br />  : {{tmpl(actors) '#actors_template'}}<br /> : ${year} </p> ... </script> <script id="actors_template" type="text/x-jquery-tmpl"> ${$data} {{if $data !== $item.parent.data.actors[$item.parent.data.actors.length - 1]}} , {{/if}} </script>

और अंत में, इस खंड में अंतिम उदाहरण दिखाता है कि विकल्प तर्क को नेस्टेड टेम्पलेट में कैसे पास किया जाए, और साथ ही यह दर्शाता है कि संसाधित सरणी में अंतिम तत्व को निर्धारित करने के लिए विकल्प तर्क का उपयोग कैसे किया जा सकता है (उदाहरण के लिए पूर्ण कोड NemTemplates3.htm फ़ाइल में है):

 <script id="movieTmpl" type="text/x-jquery-tmpl"> ... <p> : ${director}<br />  : {{tmpl(actors, { last: actors[actors.length - 1] }) '#actors_template'}}<br /> : ${year} </p> ... </script> <script id="actors_template" type="text/x-jquery-tmpl"> ${$data} {{if $data !== $item.last}} , {{/if}} </script>

परिवर्तन

JQuery के टेम्प्लेट की एक और दिलचस्प विशेषता एचटीएमएल मार्कअप का परिवर्तन है, जो {{रैप}} टैग का उपयोग करता है (आम तौर पर बोलना, लपेटना एक "रैपिंग" है, लेकिन मुझे लगता है कि "परिवर्तन" शब्द बेहतर है कि क्या हो रहा है) का सार दर्शाता है।

{{रैप}} टैग का उपयोग करने का एक उत्कृष्ट उदाहरण बुकमार्क करना है:

यहाँ यह अंदर जैसा दिखता है ( परिवर्तन 1.htm फ़ाइल में पूर्ण उदाहरण कोड):

 <script id="tabsContent" type="text/x-jquery-tmpl"> {{wrap(null, { viewState: $item.viewState }) '#tabsTmpl'}} <h1>English</h1> <div> <h2>The Ballad of East and West</h2> <h3>Rudyard Kipling</h3> <p>OH, East is East, and West is West...</p> </div> {{/wrap}} </script>

परिवर्तन के लिए प्रारंभिक डेटा टैबकॉन्टेंट टेम्प्लेट में रखे गए हैं - यह वह टेम्प्लेट है जिसे मैं तुरंत जारी रखूंगा ।

जिस HTML मार्कअप को मैं बदलूंगा उसे {{रैप}} टैग में रखा गया है। {{रैप}} टैग के लिए, ठीक उसी कॉल नोटेशन का उपयोग {[tmpl}} टैग के लिए किया जाता है - अर्थात, आपको चयनकर्ता या टेम्पलेट का नाम निर्दिष्ट करना होगा और वैकल्पिक रूप से डेटा तत्व और विकल्पों के लिए एक लिंक देना होगा। इस मामले में, विकल्प पैरामीटर में, मैं व्यूस्टेट ऑब्जेक्ट का लिंक पास करता हूं , जिसमें चयनित बुकमार्क का सूचकांक होता है।

परिवर्तन के लिए कोड इस प्रकार है:

 <script id="tabsTmpl" type="text/x-jquery-tmpl"> <div class="tab-head"> {{each $item.html("h1", true)}} <div class="tab {{if $index == $item.viewState.index}}active{{/if}}"> ${$value} </div> {{/each}} </div> <div class="tab-body"> {{html $item.html("div")[$item.viewState.index]}} </div> </script>

यहाँ DIV.tab-head में बुकमार्क शॉर्टकट हैं, और DIV.tab-body में चयनित बुकमार्क की सामग्री है।

$ Item.html ("h1", सही)} को कॉल करने से डेटा प्राप्त होता है। पहला पैरामीटर ( फ़िल्टर ) पहले स्तर के तत्वों के लिए फ़िल्टर सेट करता है , और दूसरा पैरामीटर ( टेक्स्टऑनली ) इंगित करता है कि मैं प्रत्येक चयनित तत्व का केवल आंतरिक पाठ प्राप्त करना चाहता हूं - अर्थात इस स्थिति में, मुझे लाइनों का एक संग्रह मिलेगा, जिनमें से प्रत्येक में संबंधित एच 1 टैग से पाठ होगा। स्ट्रिंग्स के इस संग्रह से, मैं बुकमार्क शॉर्टकट बनाता हूं।

मैं थोड़ा परेशान हूं कि मैं html () विधि में एक मनमाने चयनकर्ता को निर्दिष्ट नहीं कर सकता हूं - लेकिन, सौभाग्य से, कोई भी मुझे इस विधि के परिणामों पर किसी भी jQuery चयनकर्ता का उपयोग करने के लिए परेशान नहीं करता है।

एक और मजेदार बिंदु चयनकर्ता को सेट करने की विधि से संबंधित है - चयनकर्ता को मेरे पसंदीदा एकल उद्धरणों में सेट करने का प्रयास करते समय, टेम्पलेट को संकलित करते समय एक त्रुटि उत्पन्न होती है।

अगला चरण मैं सक्रिय टैब के अनुरूप स्रोत DIV से चुनता हूं, और इसे DIV.tab-body में डालता हूं । कृपया ध्यान दें कि इस मामले में मैं {{html}} टैग का उपयोग करता हूं, न कि $ {...} - तथ्य यह है कि $ {...} टैग का उपयोग करते समय, विशेष वर्ण बच जाते हैं, लेकिन इस मामले में मेरे लिए कोई जरूरत नहीं

अंत में, मैं तात्कालिकता को बढ़ाता हूं:

 var viewState = { index: 0 }; $('#tabsContent').tmpl(null, { viewState: viewState }).appendTo('#tabsBag');

और बुकमार्क क्लिक हैंडलर सेट करें:

 $('#tabsBag').delegate('.tab', 'click', function () { var item = $.tmplItem(this); item.viewState.index = $(this).index(); item.update(); });

क्या होता है क्लिक हैंडलर? सबसे पहले, $ .tmplItem (यह) कॉल करके , मुझे वर्तमान तत्व से जुड़े टेम्पलेट उदाहरण के लिए एक लिंक मिलता है। फिर, मैं चयनित बुकमार्क के सूचकांक को बदल देता हूं - याद रखें कि हमारे पास टेम्पलेट के प्रत्येक उदाहरण में व्यूस्टेट ऑब्जेक्ट का संदर्भ है? और अंत में, मैं टेम्पलेट उदाहरण के अपडेट () विधि को कॉल करता हूं, जिससे टेम्पलेट को फिर से प्रस्तुत किया जा सकता है, लेकिन व्यूस्टेट में एक अलग मूल्य के साथ।

निम्नलिखित उदाहरण अधिक जटिल है, लेकिन अधिक उपयोगी है।

पिछले उदाहरण से इसका पहला अंतर यह है कि मैं परिवर्तन के लिए स्रोत डेटा गतिशील रूप से बनाता हूं (पूर्ण उदाहरण कोड फ़ाइल ट्रांसफॉर्मेशन 2.htm में है ):

 <script id="movieListTmpl" type="text/x-jquery-tmpl"> {{wrap(null, {viewState: $item.viewState}) '#tabsTmpl'}} {{tmpl(dataItems) '#movieTmpl'}} {{/wrap}} </script> <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> ... </div> </script>

 var viewState = { index: 0 }; $('#movieListTmpl').tmpl({ dataItems: dataItems }, { viewState: viewState }).appendTo('#tabsBag');

दूसरा अंतर है क्योंकि बुकमार्क नामों के साथ टैग अब पहले स्तर पर नहीं हैं, शॉर्टकट बनाते समय मुझे यह जानकारी प्राप्त करने के लिए jQuery के चयनकर्ताओं का उपयोग करना होगा:

 <script id="tabsTmpl" type="text/x-jquery-tmpl"> <div class="tab-head"> {{each $item.html("div")}} <div class="tab {{if $index == $item.viewState.index}}active{{/if}}"> ${$('h2', $value).text()} </div> {{/each}} </div> <div class="tab-body"> {{html $item.html("div")[$item.viewState.index]}} </div> </script>

ब्राउज़र में, यह उदाहरण इस तरह दिखेगा:

टेम्पलेट कैशिंग

प्रत्येक कॉल $ ('# ...')। Tmpl (...) टेम्पलेट को संकलित करता है, जो आधुनिक ब्राउज़रों में जावास्क्रिप्ट की नाटकीय रूप से वृद्धि की गति के बावजूद, प्रदर्शन पर बहुत नकारात्मक प्रभाव डाल सकता है। JQuery के टेम्प्लेट डेवलपर्स इस स्पष्ट तथ्य को अनदेखा नहीं कर सकते हैं, इसलिए jQuery के टेम्प्लेट पूर्व-संकलन और कैशिंग टेम्पलेट्स के लिए एक तंत्र प्रदान करते हैं।

टेम्पलेट का संकलन और कैशिंग निम्नानुसार है:

 $('#movieTmpl').template('movieTmpl');

संकलित टेम्प्लेट को मूवीटैंप के रूप में jQuery के टेम्प्लेट आंतरिक कैश में सहेजा जाता है । कैश्ड टेम्पलेट तक पहुँचने के लिए, jQuery.tmpl () विधि का उपयोग किया जाता है, और कैश्ड टेम्पलेट का नाम इसे पहले पैरामीटर के रूप में दिया जाता है:

 $.tmpl('movieTmpl', dataItems).appendTo('#movieListBag');

नीचे दिए गए उदाहरण में, एक मूवी सूची को नेविगेट किया जाता है, और मूवी जानकारी प्रदर्शित करने के लिए एक कैश्ड टेम्पलेट का उपयोग किया जाता है।

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

 <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> <h2> ${title} </h2> <p> : ${director}<br />  : ${actors}<br /> : ${year} </p> </div> </div> <div> {{if $item.canMoveBack}} <a href="javascript:" class="nav-link" x-inc="-1">[]</a> {{/if}} {{if $item.canMoveFwd}} <a href="javascript:" class="nav-link" x-inc="1">[]</a> {{/if}} </div> </script>

साथी स्क्रिप्ट भी सरल है:

 var movieIndex = 0; $(function () { $('#movieTmpl').template('movieTmpl'); updateMovie(); $('#movieBag').delegate('.nav-link', 'click', function () { movieIndex += parseInt($(this).attr('x-inc')); updateMovie(); }); }); function updateMovie() { $('#movieBag').empty(); $('#movieBag').append( $.tmpl('movieTmpl', dataItems[movieIndex], { canMoveBack: movieIndex > 0, canMoveFwd: movieIndex < dataItems.length - 1 })); }

नेविगेशन लिंक पर क्लिक करने के लिए हैंडलर चयनित फिल्म के सूचकांक को बदल देता है, और फिर अपडेटमविओ () फ़ंक्शन को कॉल करता है, जो पहले कंटेनर को फिल्म के विवरण के साथ साफ करता है, और फिर इसे नए डेटा से भरता है।

यहाँ यह दिखाया गया है कि यह उदाहरण एक ब्राउज़र में कैसा दिखता है:

गतिशील टेम्पलेट लोड हो रहा है

दुर्भाग्य से, नीचे दिखाया गया कोड काम नहीं करेगा:

 <script id="movieTmpl" src="Templates/DynamicLoading.htm" type="text/x-jquery-tmpl"></script>

बेशक, ब्राउज़र संबंधित फ़ाइल को डाउनलोड करता है - लेकिन आप अभी भी इसकी सामग्री तक नहीं पहुंच सकते।

लेकिन टेम्प्लेट को अभी भी एक अलग फाइल में रखा जा सकता है, और इसके लिए कोड की एक अतिरिक्त लाइन की आवश्यकता होगी ( डायनेमिक लाईडिंग कोड में पूर्ण उदाहरण कोड है )

 $(function () { $.get('Templates/DynamicLoading.htm', {}, function (templateBody) { $.tmpl(templateBody, dataItems).appendTo('#movieListBag'); }); });

क्योंकिइस स्थिति में, हमें टेक्स्ट के रूप में टेम्पलेट मिलता है, इसकी तात्कालिकता के लिए jQuery.tmpl () विधि का उपयोग किया जाता है , पहला तर्क जिसके लिए टेम्पलेट का प्राप्त पाठ पास किया गया है।

हां, jQuery.tmpl () विधि का उपयोग टेक्स्ट और परंपरा के रूप में निर्दिष्ट नाम और टेम्प्लेट द्वारा कैश्ड दोनों टेम्पलेटों को त्वरित करने के लिए किया जाता है - हालाँकि, यह उन्हें एक दूसरे से अलग करने के लिए पर्याप्त स्मार्ट है।

आप एकाधिक संबंधित टेम्पलेट्स डाउनलोड करने की आवश्यकता है, तो आप पुस्तकालय का उपयोग कर सकते WaitSync ( "देखें। अतुल्यकालिक कॉल की तुल्यकालन WaitSync। ») या अपने सिन्क्रोनाइज़र बारे में (पूर्ण नमूना कोड - फ़ाइल DynamicLoading2.htm ):

 $(function () { var ws = new WaitSync(function () { $.tmpl('movieTmpl', dataItems).appendTo('#movieListBag'); }); $.ajax({ cache: false, url: 'Templates/MovieTmpl.htm', success: ws.wrap('MovieTmpl', function (templateBody) { $.template('movieTmpl', templateBody); }), error: ws.wrap('MovieTmpl', function () { alert('Error loading MovieTmpl.htm!'); }) }); $.ajax({ cache: false, url: 'Templates/ActorsTmpl.htm', success: ws.wrap('ActorsTmpl', function (templateBody) { $.template('actorsTmpl', templateBody); }), error: ws.wrap('ActorsTmpl', function () { alert('Error loading ActorsTmpl.htm!'); }) }); });

कृपया ध्यान दें कि इस मामले में, actTTmpl टेम्पलेट को नाम से पुकारा जाता है (फ़ाइल टेम्पलेट \ MovieTmpl.htm ):

 <p> : ${director}<br />  : {{tmpl(actors, { last: actors[actors.length - 1] }) 'actorsTmpl'}}<br /> : ${year} </p>

गतिशील अद्यतन

व्यावहारिक भाग के अंतिम भाग में, मैं jQuery टेम्प्लेट के दो और परिदृश्य दिखाऊंगा - संबंधित डेटा को बदलना और संबंधित टेम्पलेट को बदलना।

नीचे दिए गए उदाहरण में, प्रत्येक फिल्म के लिए, इसकी रेटिंग को बदलने की क्षमता जोड़ी गई है (पूर्ण उदाहरण कोड डायनामिकयूडेट 1।htm फ़ाइल में है ):

 <script id="movieTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> <img src="Content/Thumbnails/${thumbnail}" class="thumbnail" /> <div class="base-info"> ... <p> : <img src="Images/rating-down.png" alt="" title="-1" class="rating-button" x-inc="-1" /> ${rating} <img src="Images/rating-up.png" alt="" title="+1" class="rating-button" x-inc="1" /> </p> </div> </div> </script>

संबद्ध कोड:

 $(function () { $('#movieTmpl').tmpl(dataItems).appendTo('#movieListBag'); $('#movieListBag').delegate('.rating-button', 'click', function () { var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr('x-inc')); item.update(); }); });

जैसा कि आप देख सकते हैं, यह कोड परिवर्तन अनुभाग से बुकमार्क कोड के समान है, केवल बुकमार्क के साथ काम करते समय मैंने साझा व्यूस्टैट ऑब्जेक्ट को एक्सेस किया , और यहां मैं टेम्पलेट उदाहरण से जुड़े डेटा के साथ काम करता हूं।

ब्राउज़र में, यह उदाहरण इस तरह दिखता है:

निम्न उदाहरण संबंधित टेम्प्लेट के प्रतिस्थापन को प्रदर्शित करता है (फ़ाइल में पूर्ण उदाहरण कोड डायनामिकयूडेट 2 है।

 <script id="movieShortTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> {{tmpl '#movieMainTmpl'}} <p style="clear: both"><a href="javascript:" class="more-details">[...]</a></p> </div> </script> <script id="movieFullTmpl" type="text/x-jquery-tmpl"> <div class="movie-bag"> {{tmpl '#movieMainTmpl'}} <p style="clear: both">  :</p> <div> {{each frames}} <img src="Content/Frames/${$value}" /> {{/each}} </div> <p><a href="javascript:" class="more-details">[...]</a></p> </div> </script>

यहाँ मैं दो टेम्पलेट्स का उपयोग करता हूं, MovieShortTmpl और movieFullTmpl , जिनमें से सामान्य भाग को मूवीमैन टेम्पलेट में लिया जाता है ।

संबद्ध कोड:

 $(function () { var shortTemplate = $('#movieShortTmpl').template('shortTemplate'); var fullTemplate = $('#movieFullTmpl').template(); $.tmpl('shortTemplate', dataItems).appendTo('#movieListBag'); $('#movieListBag').delegate('.more-details', 'click', function () { var item = $.tmplItem(this); item.tmpl = item.tmpl === shortTemplate ? fullTemplate : shortTemplate; item.update(); }); });

मुझे लगता है कि इस कोड को और स्पष्टीकरण की आवश्यकता है।

टेम्पलेट को बदलने के लिए, मुझे एक संकलित टेम्पलेट के लिंक की आवश्यकता है। मुझे .template () कॉल का उपयोग करके ये लिंक मिलते हैं । इसके अलावा, चूंकि शॉर्ट लोडप्लेट टेम्पलेट का उपयोग पेज लोड करने के बाद फिल्मों की एक सूची प्रस्तुत करने के लिए किया जाता है, मैं इसे कैश में सहेजता हूं ताकि इसे नाम से इंस्टेंट किया जा सके।

ओवर / लेस लिंक पर क्लिक करने के लिए हैंडलर का कोड पिछले उदाहरण के कोड से काफी मिलता-जुलता है, इसमें मैं पहले से संकलित टेम्प्लेट में से एक को tmpl फ़ील्ड में लिंक प्रदान करता हूं और रेंडर करने के लिए अपडेट () विधि को कॉल करता हूं ।

ब्राउज़र में, यह उदाहरण इस प्रकार है:

निष्कर्ष

आप इस लिंक से लेख में उपयोग किए गए उदाहरणों के कोड को डाउनलोड कर सकते हैं ।

आप ASP.NET CDN वेबसाइट से या सीधे GitHub रिपॉजिटरी से jQuery के टेम्प्लेट डाउनलोड कर सकते हैं :

प्रलेखन jQuery टेम्पलेट्स पर उपलब्ध वेबसाइट jQuery प्रलेखन ।

उदाहरणों में, मैंने jQuery 1.5 RC1 का उपयोग किया था , लेकिन jQuery के टेम्प्लेट संस्करण jQuery 1.4.2 से शुरू होकर काम करेंगे - मेरी पिछली परियोजना में इस लिंक का उपयोग किया गया था।

नीचे दिए गए लिंक आपको jQuery के टेम्पलेट के बारे में और जानने में मदद करेंगे :

अन्य "टेम्पलेट इंजन" की तुलना में jQuery के टेम्प्लेट के प्रदर्शन के लिए एक महसूस करने के लिए , ब्रायन लैंडौ के लेख " बेंचमार्किंग जावास्क्रिप्ट टेंपलेटिंग लाइब्रेरी " पर एक नज़र डालें ।

अंत में, मैं लेख पर काम के दौरान की गई बहुमूल्य टिप्पणियों के लिए विटाली दिलमुखामेतोव और डेनिस ग्लैडिख का शुक्रिया अदा करना चाहता हूं ।

JQuery के टेम्पलेट्स के साथ काम करना