🏝️ 😯 🖊️ ग्राहक पक्ष XSLT प्रसंस्करण मुद्दों को सुलझाने (भाग 2) 🖕🏽 🥅 🥪

पिछले लेख में, मैंने वर्णन किया कि क्लाइंट-साइड xsl टेम्प्लेट को संसाधित करते समय समावेशन और कैशिंग को कैसे लागू किया जाए। आज मैं आपको बताउंगा कि आप किस टूल से क्लाइंट-साइड xslt रूपांतरणों को डिबग कर सकते हैं और <xsl: value of select = "xxx" अक्षम-आउटपुट-एस्केप = "हां" /> फ़ायरफ़ॉक्स में निर्माण कार्य करता है।

क्लाइंट पर XSLT डीबग करना

ब्राउज़र में xsl- दस्तावेज़ों के प्रसंस्करण के दौरान विभिन्न त्रुटियां हो सकती हैं:

1) नेटवर्क त्रुटियां - जब xml या xsl डेटा प्राप्त नहीं हुआ था;

2) टेम्पलेट प्रसंस्करण त्रुटियाँ।

नेटवर्क त्रुटियों

नेटवर्क त्रुटियों को नियंत्रित करने के लिए आप ब्राउज़र डीबगिंग टूल का उपयोग कर सकते हैं। सभी डिबगिंग टूल फायरबग (फ़ायरफ़ॉक्स), ड्रैगनफ़्लाइ (ओपेरा) और डेवटूल (क्रोम) दिखा सकते हैं कि एक अतुल्यकालिक अनुरोध द्वारा सीधे नेटवर्क से कौन से संसाधन डाउनलोड किए गए थे। उदाहरण के लिए, यदि हम पहले। Xsl टेम्पलेट का उपयोग करके in_data.xml डेटा संसाधित करते हैं, तो हम इस डेटा के लोडिंग को नियंत्रित कर सकते हैं

- फायरबग में अनुभाग "नेट"

- ड्रैगनफ्लाई में नेट सेक्शन

- खंड "संसाधन" भक्ति में।

अन्यथा, स्थिति यह है कि यदि सफल प्रसंस्करण के लिए आपको अतिरिक्त xsl-file (incllud) लोड करने की आवश्यकता है। इस मामले में, फ़ायरबग (फ़ायरफ़ॉक्स) यह नहीं दिखाएगा कि कुछ डाउनलोड किया गया है।

और एकीकृत डिबगिंग वातावरण ड्रैगनफ़ली (ओपेरा) और डेवटूल (क्रोम) दिखाएगा कि अतिरिक्त एक्सएसएल फाइलें क्या भरी हुई थीं।

टेम्पलेट प्रसंस्करण त्रुटियां

यदि टेम्प्लेट के प्रसंस्करण के दौरान कोई त्रुटि हुई, तो इसे पकड़ा जा सकता है और आपके लिए सुविधाजनक रूप में प्रदर्शित किया जा सकता है। विकास के दौरान फायरबग कंसोल में ऐसे संदेश छोड़ना मेरे लिए सुविधाजनक है

jQuery( '#id_div' ).transform( { xml: 'res/1.xml' , xsl: 'res/1.xsl' , success: function (){ jQuery( '#id_info' ).html( '' ); }, error: function (xml_data, xsl_data, success, cur_obj, error){ console.log( 'xml: ' +xml_data); console.log( 'xsl: ' +xsl_data); console.log( 'success: ' +success); console.log( 'cur_obj:' );console.log(cur_obj); console.log( 'error:' );console.log(error); } }); * This source code was highlighted with Source Code Highlighter .

इस स्थिति में, त्रुटि आउटपुट कुछ इस तरह होगा:

यदि कोई त्रुटि होती है, तो त्रुटि ईवेंट उठाया जाएगा। ईवेंट फ़ंक्शन के लिए कई पैरामीटर पारित किए जाएंगे, जिनमें से मुख्य - त्रुटि - वास्तव में त्रुटि का विवरण।

अक्षम-उत्पादन-भागने = फ़ायरफ़ॉक्स में "हाँ"

समस्या का वर्णन

कुछ मामलों में, फ़ॉर्मेट किए गए HTML के पूरे विखंडन xml डेटा में आ सकते हैं, ऐसे मामलों में इन विखंडनों को बिना परिवर्तन के अंतिम दस्तावेज़ में डाला जाना चाहिए, जो कि "जैसा है"। उदाहरण के लिए, यह खोज परिणाम युक्त डेटा हो सकता है जिसमें खोज शब्द बोल्ड ("हम <b> खोजे गए </ b> सभी संभावित समाधानों के लिए" हाइलाइट किया गया है)। आप xslt टूल के साथ टेक्स्ट का एक सरल प्रतिस्थापन कर सकते हैं, लेकिन यह इसके लायक नहीं है (अपने खाली समय में इसे किसी तरह से करने की कोशिश करें)। इसलिए, पहले से ही स्वरूपित पाठ को प्रसारित करना आसान है। एक अनुभवी प्रोग्रामर बहुत अधिक उदाहरणों के साथ आएगा। भागने के बिना डेटा डालने के लिए, xslt में एक विशेष विशेषता अक्षम-आउटपुट-एस्केपिंग है, जिसे "हां" पर सेट किया जाना चाहिए। ऐसा दिखता है

< xsl:value-of select ="xxx" disable-output-escaping ="yes" /> * This source code was highlighted with Source Code Highlighter .

लेकिन फ़ायरफ़ॉक्स में, पहले संस्करण के साथ शुरू होता है और पूरी तीसरी शाखा के साथ समाप्त होता है (मैंने फ़ायरफ़ॉक्स 4 में इसका परीक्षण नहीं किया है), एक्सएसएल प्रोसेसर का पूर्ण कार्यान्वयन नहीं है। उनका xsl प्रोसेसर, जो खुद को "ट्रांसफॉर्मिक्स" के रूप में पहचानता है, अक्षम-आउटपुट-बचने = "हाँ" को नहीं संभालता है। यह त्रुटि कई वर्षों से हो रही है https://bugzilla.mozilla.org/show_bug.cgi?id=98168 और हमने हाल ही में इस बग की 9 वीं वर्षगांठ "मनाई"। वहाँ लिंक में फ़ायरफ़ॉक्स टीम के लिए बहाने भी हैं, जिसे एक चीज़ तक कम किया जा सकता है - बहुत काम है, अगर आप इसे स्वयं संपादित करना चाहते हैं।

समस्या हल करना

समस्या का एक ऐसा समाधान है - <xsl: copy-of का चयन करने के लिए = "xxx" /> कॉल के बजाय <xsl: value of-of select = "xxx" का उपयोग कर निष्क्रिय-आउटपुट-एस्केप = "हां" /> का निर्माण करें। लेकिन इस मामले में, हम xxx नोड में डेटा स्थानांतरित नहीं कर सकते हैं

< xxx > <! [CDATA[ < i > "" </ i > ]] ></ xxx > * This source code was highlighted with Source Code Highlighter .

लेकिन आपको इस तरह से डेटा ट्रांसफर करना होगा

< xxx > < i > "" </ i ></ xxx > * This source code was highlighted with Source Code Highlighter .

यही है, यह अब सही xml फ़ाइल नहीं होगी। और फिर हमें अन्य ब्राउज़रों में एक समस्या मिलती है, जहां ऐसा समाधान अब काम नहीं करेगा।

समस्या का एक और समाधान

मैंने एक अलग दृष्टिकोण का उपयोग करने का फैसला किया। जावास्क्रिप्ट में लिखे गए एक विशेष फिक्स का उपयोग करें।

1. सामान्य के बजाय <xsl:value-of select="xxx" disable-output-escaping="yes"/>

हमारे टेम्प्लेट में आपको कॉल का उपयोग करना होगा

< xsl:call-template name ="inc_disable_output_escaping" >< xsl:with-param name ="param" select ="xxx" /></ xsl:call-template > * This source code was highlighted with Source Code Highlighter .

जहाँ inc_disable_output_es Avoid टेम्प्लेट इस तरह दिखता है:

< xsl:template name ="inc_disable_output_escaping" > < xsl:param name ="param" ></ xsl:param > < xsl:choose > < xsl:when test ="system-property('xsl:vendor')='Transformiix'" >  < div style ="display:none" class ="fix_ff_disable_output_escaping" >< xsl:value-of select ="$param" disable-output-escaping ="yes" /></ div > </ xsl:when > < xsl:otherwise > < xsl:value-of select ="$param" disable-output-escaping ="yes" /> </ xsl:otherwise > </ xsl:choose > </ xsl:template > * This source code was highlighted with Source Code Highlighter .

इस टेम्पलेट में, xsl प्रोसेसर (xsl: विक्रेता) के नाम का उपयोग करते हुए, हम डेटा को आउटपुट आउटपुट में अक्षम-आउटपुट-एस्केपिंग = "हाँ" के साथ आउटपुट करेंगे, और फ़ायरफ़ॉक्स से xsl प्रोसेसर के मामले में, हम डेटा को एक अदृश्य कंटेनर में डाल देंगे जैसे कि फ़ायरफ़ॉक्स। सम्मिलित कर सकते हैं, अर्थात्, परिरक्षित रूप में।

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

function fix_ff_disable_output_escaping() { jQuery( 'div.fix_ff_disable_output_escaping' ).each( function (i, obj){ var j_obj=jQuery(obj); j_obj.replaceWith(Encoder.htmlDecode(j_obj.html())); } ) } * This source code was highlighted with Source Code Highlighter .

Html mnemonics को डीकोड करने के लिए एनकोडर js लाइब्रेरी के htmlDecode फ़ंक्शन का उपयोग किया जाता है।

इस तकनीक के संचालन और समाधान के साथ एक संग्रह का एक उदाहरण यहां पाया जा सकता है- raject-project.net/xsl_tests/test2.html

PS याद रखें कि xml / xsl दस्तावेज़ों के लिए सही सामग्री-प्रकार भेजें। अर्थात्, "सामग्री-प्रकार: पाठ / xml"।

ग्राहक पक्ष XSLT प्रसंस्करण मुद्दों को सुलझाने (भाग 2)