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



अतिरिक्त प्लगइन सुविधाओं में शामिल हैं:

1. आदेशों का एक सेट जो उनके साथ जुड़े डेटा को बदलते समय परिवर्तित किए गए टेम्प्लेट को सरल बनाता है;
2. रेंडर किए गए टेम्प्लेट के बाद उठाई गई ईवेंट को दस्तावेज़ संरचना में जोड़ा जाता है।

अतिरिक्त कार्यों के लिए कोड jquery.tmplPlus.js फ़ाइल में ले जाया गया है, इसलिए उनका उपयोग करने के लिए आपको इस फ़ाइल में एक लिंक जोड़ना होगा:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रदान किए गए टेम्प्लेट बदलने के लिए कमांड

टीमों को बुलाओ

सभी कमांड को कॉल करने के लिए, jQuery.tmplCmd () विधि का उपयोग करें।



इस विधि में आह्वान के तीन रूप हैं:

1. jQuery.tmplCmd (कमांड, tmplItem)
2. jQuery.tmplCmd (कमांड, tmplItems)
3. jQuery.tmplCmd (कमांड, डेटा, tmplItems)

कमांड पैरामीटर का उपयोग कमांड नाम ( अपडेट , हटाने , बदलने या खोजने ) को निर्दिष्ट करने के लिए किया जाता है।



TmlItem पैरामीटर का उपयोग टेम्पलेट इंस्टेंस के संदर्भ को पास करने के लिए किया जाता है जिसके साथ कमांड काम करेगा। तदनुसार, tmplItems पैरामीटर का उपयोग टेम्पलेट इंस्टेंस के लिए लिंक की एक सरणी को पास करने के लिए किया जाता है।



डेटा पैरामीटर एक डेटा तत्व या ऐसे लिंक की एक सरणी के लिए एक संदर्भ हो सकता है और tmplItems सरणी को फ़िल्टर करने के लिए उपयोग किया जाता है। यदि यह पैरामीटर निर्दिष्ट किया गया है, तो सभी प्रकार के टेम्पलेट ऑपरेशन में भाग नहीं लेंगे, लेकिन डेटा पैरामीटर में निर्दिष्ट डेटा तत्वों से जुड़े लोग ही शामिल हैं:











प्रत्येक आदेश के लिए इन तीनों में से कौन सा आह्वान लागू है, मैं इन आदेशों के विवरण में इंगित करूंगा।

कमांड को बदलें

प्रतिस्थापित कमांड संभवतः सबसे दिलचस्प है, यह दस्तावेज़ संरचना में प्रदान किए गए टेम्प्लेट के क्रम को उसके तर्कों द्वारा निर्दिष्ट आदेश के अनुसार बदलता है, और टेम्प्लेट को पुन: रेंडर किए बिना।



यह आदेश तीन प्रकार के आह्वान की अनुमति देता है, लेकिन उनमें से केवल एक में व्यावहारिक अनुप्रयोग है:

1. jQuery.tmplCmd ('बदलें', डेटा, tmplItems)

प्रतिस्थापित कॉल के बाद, प्रदान किए गए टेम्प्लेट को उस क्रम में पुन: व्यवस्थित किया जाएगा जिसमें डेटा तत्व डेटा सरणी में संदर्भित होते हैं। छँटाई के लिए सही समाधान!



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

 var dataItems = [ { firstName: '', lastName: '' }, { firstName: ' ', lastName: '' }, ... ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस डेटा को प्रदर्शित करने के लिए, मैं निम्नलिखित टेम्पलेट का उपयोग करता हूं:

 <script id="item_tmpl" type="text/x-jquery-tmpl"> <tr class="item"> <td>${firstName}</td> <td>${lastName}</td> <td> <img src="Images/item-edit.png" class="item-edit" title="Edit" /> <img src="Images/item-delete.png" class="item-delete" title="Delete" > </td> </tr> </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

रेंडर करने के बाद, मैं tmplItems सरणी में टेम्पलेट के सभी उदाहरणों के लिंक सहेजता हूं :

 $('#item_tmpl').tmpl(dataItems, options).appendTo('#items_bag'); tmplItems = $('#items_bag .item').map(function () { return $.tmplItem(this); }).get();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मैं इवेंट हैंडलर को टेबल हेडर में सॉर्ट-एस्क और सॉर्ट-डीएससी कक्षाओं के साथ चिह्नित चित्रों से जोड़ता हूं। वैकल्पिक x- फ़ील्ड-नाम विशेषता में फ़ील्ड के आधार पर उसका नाम होता है:

 <table id="items_bag"> <tr> <th>First Name <img src="Images/sort-asc.png" class="sort-asc" x-field-name="firstName" alt="" /> <img src="Images/sort-desc.png" class="sort-desc" x-field-name="firstName" alt="" /> </th> <th>Last Name <img src="Images/sort-asc.png" class="sort-asc" x-field-name="lastName" alt="" /> <img src="Images/sort-desc.png" class="sort-desc" x-field-name="lastName" alt="" /> </th> <th></th> </tr> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आरोही छँटाई के लिए कोड नीचे दिखाया गया है:

 $('#items_bag').delegate('.sort-asc', 'click', function () { var fieldName = $(this).attr('x-field-name'); dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); }); tmplItems = $.tmplCmd('replace', dataItems, tmplItems); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहाँ मुझे सबसे पहले क्षेत्र के नाम को छाँटना है:

 var fieldName = $(this).attr('x-field-name');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

फिर मैं डेटा तत्वों के साथ सरणी को सॉर्ट करता हूं:

 dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और अंत में, मैं दस्तावेज़ में परिवर्तित डेटा प्रदर्शित करने के लिए प्रतिस्थापित कमांड को कॉल करता हूं:

 tmplItems = $.tmplCmd('replace', dataItems, tmplItems);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रतिस्थापित कमांड, उसी क्रम में स्थित टेम्प्लेट इंस्टेंसेस के लिंक की एक सरणी देता है जो दस्तावेज़ में दिए गए टेम्प्लेट के रूप में है, इसलिए मैं tmplItems में प्रतिस्थापित रन के परिणाम को सहेजता हूं ।



अवरोही क्रम में छंटनी का कोड समान दिखता है:

 $('#items_bag').delegate('.sort-desc', 'click', function () { var fieldName = $(this).attr('x-field-name'); dataItems.sort(function (a, b) { return compareStrings(a[fieldName], b[fieldName]); }).reverse(); tmplItems = $.tmplCmd('replace', dataItems, tmplItems); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह कैसे काम करता है नीचे दिए गए वीडियो में दिखाया गया है:

अद्यतन आदेश

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



यह आदेश तीन प्रकार के आह्वान की अनुमति देता है, और, प्रतिस्थापित आदेश के विपरीत, इन सभी रूपों में व्यावहारिक अनुप्रयोग हैं:

1. jQuery.tmplCmd ('अपडेट', tmplItem)
2. jQuery.tmplCmd ('अपडेट', tmplItems)
3. jQuery.tmplCmd ('अपडेट', डेटा, tmplItems)

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

 $('#items_bag').delegate('.item-edit', 'click', function () { var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data; editDialog.show(dataItem, function () { $.tmplCmd('update', tmplItem); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां मुझे पहली बार टेम्पलेट इंस्टेंस का लिंक और डेटा आइटम का लिंक मिलेगा:

 var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

फिर मैं एक डायलॉग बॉक्स को कॉल करता हूं जिसमें मैं डेटा आइटम और एक कॉलबैक फ़ंक्शन के लिए एक लिंक देता हूं, जिसे कॉल किया जाएगा यदि उपयोगकर्ता ने ओके पर क्लिक किया है, और डेटा बदल दिया गया है:

 editDialog.show(dataItem, function () { $.tmplCmd('update', tmplItem); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और कॉलबैक फ़ंक्शन में, मैं अपडेट कमांड को कॉल करता हूं, इसे टेम्प्लेट इंस्टेंस का लिंक देता है, जिसके कारण इसे फिर से प्रस्तुत किया जाता है:

 $.tmplCmd('update', tmplItem);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह कैसे काम करता है नीचे दिए गए वीडियो में दिखाया गया है:

कमांड निकालें

हटाए गए कमांड, जैसा कि आप अनुमान लगा सकते हैं, दस्तावेज़ संरचना से प्रदान किए गए टेम्पलेट्स को निकालता है। अद्यतन आदेश की तरह, इसमें तीन प्रकार के आह्वान हैं:

1. jQuery.tmplCmd ('निकालें', tmplItem)
2. jQuery.tmplCmd ('निकालें', tmplItems)
3. jQuery.tmplCmd ('निकालें', डेटा, tmplItems)

इस कमांड की ख़ासियत यह है कि यह न केवल दस्तावेज़ संरचना से प्रदान किए गए टेम्पलेट्स को हटाता है, बल्कि tmplItems सरणी से संबंधित टेम्पलेट उदाहरणों के लिंक भी हटाता है!



यह, मेरी राय में, एक असामान्य दृष्टिकोण है - एक तरफ, यह एक सुसंगत स्थिति में tmplItems सरणी को बनाए रखने के लिए आवश्यक प्रयास को थोड़ा कम करता है, और दूसरी ओर, यह एक अप्रिय स्थिति पैदा कर सकता है। शायद मैं इस टीम को कोई साइड इफेक्ट नहीं देना चाहूंगा।



तालिका आइटम को हटाने का कोड नीचे दिखाया गया है:

 $('#items_bag').delegate('.item-delete', 'click', function () { var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data; if (confirm('Do you really want to delete "' + dataItem.firstName + ' ' + dataItem.lastName + '"?')) { dataItems.splice(jQuery.inArray(dataItem, dataItems), 1); $.tmplCmd('remove', dataItem, tmplItems); updateDebugInfo(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां मुझे पहली बार टेम्पलेट इंस्टेंस का लिंक और डेटा आइटम का लिंक मिलेगा:

 var tmplItem = $.tmplItem(this); var dataItem = tmplItem.data;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और उपयोगकर्ता से पुष्टि प्राप्त करने के बाद, मैं सबसे पहले dataItems सरणी से संबंधित तत्व को हटाता हूं :

 dataItems.splice(jQuery.inArray(dataItem, dataItems), 1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और फिर मैं दस्तावेज़ संरचना से संबंधित प्रदान किए गए टेम्प्लेट को हटाता हूं और उसी समय टेंपलेट्स से टेम्पलेट उदाहरण के लिंक को हटा देता हूं :

 $.tmplCmd('remove', dataItem, tmplItems);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अपडेटडबगइन्फो () फ़ंक्शन के लिए कोड नीचे दिखाया गया है:

 function updateDebugInfo() { $('#data_items_length').text(dataItems.length); $('#tmpl_items_length').text(tmplItems.length); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह फ़ंक्शन केवल निकालने के आदेश के साइड इफेक्ट को प्रदर्शित करने के लिए है ।



यह कैसे काम करता है नीचे दिए गए वीडियो में दिखाया गया है:

आज्ञा पाओ

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



यह आदेश केवल एक प्रकार के आह्वान की अनुमति देता है:

1. jQuery.tmplCmd ('ढूंढें', डेटा, tmplItems)

इस आदेश का परिणाम डेटा तर्क के माध्यम से पारित डेटा से जुड़े टेम्पलेट इंस्टेंस के लिए एक सरणी है।



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

 $('#item_rnd').click(function () { var dataItem = dataItems[Math.round(Math.random() * (dataItems.length - 1))]; var tmplItem = $.tmplCmd('find', dataItem, tmplItems)[0]; $(tmplItem.nodes).css('background-color', '#ff0000'); $(tmplItem.nodes).animate({ 'background-color': '#ffffff' }, 1500); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस उदाहरण में, मैं बेतरतीब ढंग से एक डेटा आइटम का चयन करता हूं:

 var dataItem = dataItems[Math.round(Math.random() * (dataItems.length - 1))];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

फिर, खोज कमांड का उपयोग करके , मुझे यह टेम्पलेट उदाहरण मिलता है कि यह डेटा आइटम किसके साथ जुड़ा हुआ है:

 var tmplItem = $.tmplCmd('find', dataItem, tmplItems)[0];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और अंत में, मैं तालिका में इसी पंक्ति को उजागर करता हूं:

 $(tmplItem.nodes).css('background-color', '#ff0000'); $(tmplItem.nodes).animate({ 'background-color': '#ffffff' }, 1500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



यह कैसे काम करता है नीचे दिए गए वीडियो में दिखाया गया है:

रेंडर की गई घटना

प्रदान की गई घटना को टेम्पलेट उदाहरण के लिए परिभाषित किया गया है और दस्तावेज़ संरचना में प्रदान किए गए टेम्पलेट के बाद कहा जाता है।



ईवेंट हैंडलर सेट करने के लिए, .tmpl () कॉल के विकल्प पैरामीटर का उपयोग करें:

 var options = { rendered: function (tmplItem) { if (window.console) { console.log("rendered: %s %s", tmplItem.data.firstName, tmplItem.data.lastName); } } }; $('#item_tmpl').tmpl(dataItems, options).appendTo('#items_bag');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



यह कैसे काम करता है नीचे दिए गए वीडियो में दिखाया गया है:

निष्कर्ष

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



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

• ASP.NET CDN पर jQuery के टेम्प्लेट
• जीटहब पर jQuery के टेम्पलेट

JQuery के टेम्प्लेट प्रलेखन jQuery प्रलेखन साइट पर उपलब्ध है।