2011-05-23 20 views
15

मैं एक Underscore.js टेम्पलेट में (उस में बुनियादी तर्क के साथ पेज) एक नहीं बल्कि बड़ी php टेम्पलेट परिवर्तित कर रहा हूँ बिना मुश्किल है।डिबगिंग Underscore.js टेम्पलेट्स लाइन नंबर

समस्या यह है कि मैं इसे में त्रुटियों आ रही है, और यह न्यूनतम किया गया है "संकलित" संस्करण उपयोगी जानकारी या लाइन नंबर नहीं देता है जब एक त्रुटि फेंक दिया जाता है।

वहाँ एक रास्ता Underscore.js (जैसे लाइन नंबर) में बेहतर टेम्पलेट डिबगिंग प्राप्त करने के लिए है? और यदि नहीं, तो टेम्पलेट को किसी बिंदु पर समाप्त करने का कोई तरीका है (इस तरह मैं त्रुटि को संकुचित कर सकता हूं)।

उत्तर

20

के अप्रैल 2012 के रूप में Errata:अंडरस्कोर 1.3.2 (9 अप्रैल, 2012) _.template() में परिवर्तन शुरू की है, changelog और क्या यहाँ वर्णित किया गया है ऊपर से पता चला है हो सकता है के लिए जटिलताओं के बाद से स्रोत की जाँच करें।

हां और नहीं - टेम्पलेट का पहली बार जावास्क्रिप्ट कोड (कोड पढ़ने के लिए कठिन) की एक स्ट्रिंग में अनुवाद किया गया है और कोड के एक ब्लॉक के रूप में निष्पादित किया गया है, इसलिए यदि आप सिंटैक्स त्रुटि की तलाश में हैं तो आपको अपमानजनक कोड को हटाना होगा टेम्पलेट से आप निष्पादित करने का प्रयास कर रहे हैं।

लेकिन अगर यह कुछ और, embedding एक <% return __p.join(''); %> निष्पादन तोड़ने के लिए और है कि बात करने के लिए टेम्पलेट ऊपर का परिणाम वापस आ जाएगी है (क्यों देखने के लिए स्रोत पढ़ते हैं, लेकिन अनिवार्य रूप से, टेम्पलेट ब्लॉक के परिणाम __p नामित एक सरणी में डाल रहे हैं एक के बाद एक)।

तुम भी, जबकि अपने टेम्पलेट मूल्यांकन करता है (यानी निदान को देखने के लिए अपने खाके में <% console.log(<..>) %> डाल प्रवेश करने कर सकते हैं। और अधिक उन्नत समस्या निवारण के लिए, आप भी अपने पसंदीदा डीबगर में छोड़ने के लिए अपनी टेम्पलेट कोड में एक <% debugger; %> डाल सकता है। हालांकि कोड आप देखेंगे कि आपको पढ़ने के लिए असभ्य रूप से पढ़ना होगा, आपको मूल्यांकन टेम्पलेट्स स्कोप तक पहुंच होगी।

यदि मैं व्यापक काम कर रहा था और अधिक व्यापक डिबगिंग सुविधाओं की आवश्यकता थी, तो शायद मैं underscore.js स्क्रिप्ट की प्रतिलिपि लेता हूं और कुछ नैदानिक ​​जोड़ता हूं _.template() समारोह में ही समर्थन कोड उदाहरण के लिए:।

_.template = function(str, data) { 
    var c = _.templateSettings; 
    var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' + 
    'with(obj||{}){__p.push(\'' + 
    str.replace(/\\/g, '\\\\') 
     .replace(/'/g, "\\'") 
     .replace(c.interpolate, function(match, code) { 
     return "'," + code.replace(/\\'/g, "'") + ",'"; 
     }) 
     .replace(c.evaluate || null, function(match, code) { 
     return "');" + code.replace(/\\'/g, "'") 
          .replace(/[\r\n\t]/g, ' ') + "__p.push('"; 
     }) 
     .replace(/\r/g, '\\r') 
     .replace(/\n/g, '\\n') 
     .replace(/\t/g, '\\t') 
     + "');}return __p.join('');"; 
    console.log(tmpl.replace(/;/g, '\n')); // <- dump compiled code to console before evaluating 
    var func = new Function('obj', tmpl); 
    return data ? func(data) : func; 
}; 
+1

धन्यवाद, आपने कुछ अच्छे दृष्टिकोण शामिल किए हैं और वे निश्चित रूप से डिबगिंग में सहायता करेंगे।
यदि प्रक्रिया में धीमा था तो यह अच्छा होगा, लेकिन डिबग मोड को आसान बनाना है कि टेम्पलेट को चलाया जा सकता है। यह PHP के समान प्रकार की त्रुटियों को देखने की क्षमता प्राप्त करने में सक्षम होने के लायक होगा।
मुझे ऐसा करने का अनुमान है, इसे कोड ब्लॉक के बीच की रेखाओं को गिनना होगा, और कुछ प्रकार के आंतरिक वृद्धिकर्ता को बनाए रखना होगा। – RobKohr

3

रीढ़ आई (Firebug विस्तार) में, आप टेम्पलेट्स अंडरस्कोर डीबग कर सकते हैं - बस के रूप में यदि वे नियमित रूप से JavaScript फ़ाइलों थे। टेम्पलेट आईडी (यदि निर्दिष्ट है) स्क्रिप्ट विंडो (फ़ायरफ़ॉक्स के) में आता है और आप इसे चुन सकते हैं (बस एक नियमित स्क्रिप्ट फ़ाइल की तरह), ब्रेकपॉइंट्स डालें और टेम्पलेट को बढ़ते हुए बनाए जाएं। यह कैसे करें इस बारे में अधिक जानकारी http://dhruvaray.github.io/spa-eye/#views पर है। यह आपको आसानी से आपकी त्रुटि के स्रोत को कम करने में मदद कर सकता है।

[अस्वीकरण: मैं बैकबोन नेत्र के लेखक हूँ]

0

आप एक लंबे टेम्पलेट के अंदर एक जावास्क्रिप्ट सिंटेक्स त्रुटि है, तो कभी कभी यह, खोजने के लिए मुश्किल हो सकता है के बाद से लिंटर < अंदर जावास्क्रिप्ट नहीं समझोगे %%>

अपने संपादक समारोह की जगह और की जगह का उपयोग करें:

खोजें:

%>[\s\S]*?<%[=-]? 

बदलें:

\n//html\n 

यह अपने जावास्क्रिप्ट के बीच किसी भी HTML निकाल देंगे तो आप एक लिंटर या http://esprima.org/demo/validate.html उपयोग कर सकते हैं वाक्यविन्यास त्रुटियों के लिए खोजने के लिए।

HTML template

आखिर और सजा की जगह: remaining javascript

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

संबंधित मुद्दे