2011-12-12 10 views
11

मैं जावास्क्रिप्ट का उपयोग कर क्लाइंट साइड में अपना haml कोड प्रस्तुत करना चाहता हूं। Jade या haml.js जैसे सर्वर पक्ष में अच्छे हैमल पार्सर्स हैं लेकिन मुझे क्लाइंट साइड में कोई हैमल पार्सर/डिकोडर नहीं पता है।कोई भी ग्राहक पक्ष हैमल पार्सर?

अद्यतन: Jade जो कि काफी हमाल है अब ग्राहक पक्ष का समर्थन करता है।

+1

पाया [jQuery-haml] (https://github.com/creationix/jquery-haml) - वास्तव में नहीं है लेकिन बहुत करीब – froderik

उत्तर

8

कुछ googling के बाद मुझे "client-side-haml-js" github project मिला।

clientside-haml-js एक संकलक CoffeeScript में लिखा है कि जावास्क्रिप्ट कार्यों कि HTML बनाने में Haml प्रारूप में पाठ टेम्पलेट्स संकलित है: जैसे कि यह अपनी आवश्यकताओं को पूरा करना चाहिए लगता है। यह सर्वर साइड हैमल जावास्क्रिप्ट प्रोजेक्ट से प्रेरित है, और रूबी सर्वर साइड HAML के साथ सुविधा के रूप में लिखा गया है, सभी प्रमुख ब्राउज़रों (आईई 7+, फ़ायरफ़ॉक्स 3.6+, क्रोम 10+, सफारी) का समर्थन करता है, न्यूनतम रनटाइम निर्भरताएं (केवल underscore.js, underscore.string और कॉफीस्क्रिप्ट अपने टेम्पलेट्स में कॉफीस्क्रिप्ट का उपयोग करते हुए)।

नोट: हैमल कंपाइलर को एक JSON पार्सर वाला ब्राउज़र चाहिए। आईई 7 जैसे ब्राउज़र के लिए, आपको एक JSON कार्यान्वयन भी शामिल करने की आवश्यकता है। अधिक जानकारी के लिए http://www.json.org/ देखें। एक JSON कार्यान्वयन https://github.com/douglascrockford/JSON-js पर उपलब्ध है। उनके GitHub पेज से

उदाहरण:

var fn = haml.compileStringToJs("%h1\n %div\n %p\n %span"); 
var html = fn(); 

लग रहा है यह भी एक पाठ/haml-टेम्पलेट विधि jQuery-टेम्पलेट्स के लिए इसी तरह का समर्थन करता है जैसे:

<script type="text/haml-template" id="simple"> 
%h1 
    %div 
    %p 
    %span 
</script> 

<script type="text/javascript"> 
    var fn = haml.compileHaml('simple'); 
    var html = fn(); 
</script> 
+0

लेकिन, अपने दस्तावेज़ों को देखने के बाद, ऐसा लगता है कि यह एचएएमएल स्ट्रिंग्स से जावास्क्रिप्ट में संकलित करता है जो HTML स्ट्रिंग्स भेजता है, इसलिए प्रदर्शन के रूप में नहीं यह हो सकता था। उदाहरण के लिए, HTML स्ट्रिंग्स को संकलित करने के बजाय तत्व बनाने के लिए जेएस एपीआई को संकलित करना अधिक फायदेमंद होगा, f.e. 'var div = document.createElement ('div'); div.setAttribute (...); div.appendChild (...) '। इसके अतिरिक्त, दस्तावेज़फ्रेगमेंट का उपयोग करने से वर्चुअल डोम लाइब्रेरी बनाने या उपयोग करने पर भी अधिक प्रदर्शन होता है, या इससे भी बेहतर होता है। प्रतिक्रिया अच्छी है क्योंकि जेएसएक्स जेएस कॉल में संकलित करता है जो वर्चुअल डोम बनाता है, जो तेज़ है। – trusktr

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