JQuery के लिए अनुशंसित जावास्क्रिप्ट HTML टेम्पलेट लाइब्रेरी? [बन्द है]


89

किसी भी सुझाव जिस पर HTML टेम्पलेट पुस्तकालय JQuery के साथ अच्छी तरह से जाना होगा? Googling काफी लाइब्रेरियों में बदल जाती है, लेकिन मुझे यकीन नहीं है कि एक अच्छी तरह से मान्यता प्राप्त लाइब्रेरी है जो समय की कसौटी पर खरी उतरती है।


21
कहते हैं कि आप 100 रिकॉर्ड के साथ एक json वस्तु वापस लाते हैं। प्रत्येक रिकॉर्ड को एक ही HTML टुकड़ा उत्पन्न करने की आवश्यकता होती है। यह सिर्फ js में मार्कअप उत्पन्न करने की तुलना में टेम्पलेट का उपयोग करने में मदद करता है। डिज़ाइनर को js फ़ंक्शन में स्ट्रिंग के अंदर मार्कअप की बजाय इसे डिज़ाइन करने देता है
redsquare

3
@ क्लेटस - क्योंकि ऐप्पल की श्रृंखला की तुलना में HTML फॉर्मेट किए गए टेम्पलेट का उपयोग करना आसान है
एंड्री

2
अपनी पसंद पर मदद करने के लिए इस संपूर्ण
AM

जवाबों:


58

वैसे, फ्रेंक होने के लिए, आजकल क्लाइंट-साइड टेम्पलेटिंग बहुत गर्म है, लेकिन काफी जंगल है।

सबसे लोकप्रिय हैं, मेरा मानना ​​है:

  • शुद्ध : यह केवल js का उपयोग करता है, अपने स्वयं के "सिंटैक्स" का नहीं
  • मूंछ : काफी स्थिर और अच्छा मैंने सुना।
  • jqote2 : अनुसार बेहद तेज़
  • jquery टेम्पलेट (पदावनत):

देखते हैं बहुत सारे अन्य लोगों के लिए सबसे अच्छा है, लेकिन आप परीक्षण करने के लिए उन्हें क्या आप सूट देखने के लिए है, और अपनी परियोजना शैली।

व्यक्तिगत रूप से, मेरे पास एक नया वाक्यविन्यास और तर्क का सेट ( तर्क और टेम्पलेट को मिलाकर, नमस्ते) के साथ एक कठिन समय है ?? ) के , और शुद्ध जेएस चला गया। मेरे हर एक टेम्प्लेट को स्वयं की html फ़ाइल (./usersTable.row.html) में संग्रहीत किया जाता है। मैं टेम्पलेट का उपयोग केवल तब करता हूं जब एजिंग सामग्री, और मेरे पास कुछ "लॉजिक" जेएस फाइलें होती हैं, एक टेबल के लिए, एक डिव के लिए, एक सूची के लिए। और चयन के विकल्पों के लिए एक भी नहीं (जहां मैं दूसरी विधि का उपयोग करता हूं)।

हर बार जब मैंने कुछ और जटिल करने की कोशिश की, तो मुझे पता चला कि कोड कम स्पष्ट था और मुझे "पुराना" तरीका करने की तुलना में स्थिर करने के लिए अधिक समय लग रहा था। टेम्प्लेट में तर्क मेरी राय में पूरी तरह से गैर-समझदार है, और इसे स्वयं के सिंटैक्स में जोड़ना केवल बहुत कठिन-से-ट्रेस बग जोड़ता है।


14

jTemplates

जावास्क्रिप्ट के लिए एक टेम्पलेट इंजन।

प्लगइन jQuery के लिए ...

विशेषताएं:

  • जावास्क्रिप्ट में 100%
  • precompilator
  • JSON का समर्थन करें
  • अजाक्स के साथ काम करें
  • टेम्पलेट के अंदर जावास्क्रिप्ट कोड का उपयोग करने की अनुमति दें
  • कैस्केडिंग टेम्प्लेट बनाने की अनुमति दें
  • टेम्पलेट्स में मापदंडों को परिभाषित करने की अनुमति दें
  • लाइव रिफ्रेश! - सर्वर से स्वचालित अपडेट सामग्री ...


5

jQuery के टेम्प्लेट प्लगइन Microsoft द्वारा बनाए गए और आधिकारिक jQuery प्लगइन के रूप में स्वीकार किए जाते हैं।

लेकिन ध्यान दें कि यह अब पदावनत हो गया है।


13
और "पदावनत" के बाद से। विकास रुका हुआ है, और यह बीटा से बाहर नहीं जाएगा। एक एमएस पुरुष, और jQuery ui को टीम, एक नया टेम्पलेट पर काम कर रहे JSRender तू पर आधारित है;)
roselan

हुह, बुमर - मैं इसे अपने वेब ऐप पर उपयोग कर रहा हूं :( हालांकि टिप के लिए धन्यवाद! क्या आपके पास आगामी टेम्पलेटिंग इंजन पर एक लिंक है?
एंड्री

1
अगर सब ठीक हो जाता है, बोरिस मूर द्वारा jsrender यह jquery-ui में रास्ता मिल जाएगा। आपको मेरे
हिसाब

1
मैंने jsRender को एक प्रोजेक्ट में लागू किया है और यह आश्चर्यजनक है। अच्छी तरह से जाँच के लायक है।
ASeale

4

मैं json2html की जाँच करूंगा , यह HTML स्निपेट लिखने के लिए क्षमा करता है और JSON के बजाय JSON ऑब्जेक्ट सरणी के असंरचित सूचियों में बदलने के लिए निर्भर करता है। बहुत तेजी से और डोम निर्माण का उपयोग करता है।


4
अस्वीकरण .. मैंने यह लिखा है। लेकिन जांच के लायक;)
चाड ब्राउन

3

कुछ साल पहले मैंने IBDOM का निर्माण किया था: http://ibdom.sf.net/ | यदि आप इसे ट्रंक से सीधे प्राप्त करते हैं, तो 2009 की तारीख के अनुसार, यह jQuery बाइंडिंग का समर्थन करता है।

$("#foo").injectWith(collectionOfJavaScriptObjects);

या

$("#foo").injectWith(simpleJavaScriptObject);

इसके अलावा, अब आप सभी "डेटा: प्रोपनाम" मार्करों को कक्षा में रख सकते हैं = "डेटा: प्रोपनाम अन्य क्लासनाम" विशेषताएँ, ताकि आपको उन मार्करों के साथ अपने एप्लिकेशन की सामग्री को लिटाना न पड़े।

मैंने अभी तक अपने हाल के एन्हांसमेंट को प्रतिबिंबित करने के लिए प्रलेखन का एक गुच्छा अपडेट किया है, लेकिन मैंने 2007 से उत्पादन में इस ढांचे के विभिन्न संस्करण बनाए हैं।

इस प्रश्न पर संदेह करने के लिए:

जब Microsoft ने IE5 के साथ आविष्कार किया, जिसे अब हम XmlHttpRequest और "ajax" पैटर्न के रूप में जानते हैं, तो इसके पीछे वादे का एक हिस्सा शुद्ध रूप से एक वेब ब्राउज़र और सर्वर के बीच डेटा का आदान-प्रदान करना था। XML में उस डेटा को इनकैप्सुलेट किया जाना था, क्योंकि 1999/2000 में, XML बस इतना गर्म था। कॉल-बैक तंत्र के साथ नेटवर्क पर एक xml दस्तावेज़ को पुनर्प्राप्त करने से परे, MS के MSXML ActiveX घटक ने XSL-T और XPath के रूप में जो अब हम जानते हैं, के प्री-ड्राफ्ट कार्यान्वयन का समर्थन किया।

HTTP / XML, XPath और XSL-T को पुनः प्राप्त करते हुए, डेवलपर्स ने समृद्ध "दस्तावेजों" का निर्माण करने के लिए जबरदस्त रचनात्मकता का वहन किया, जो "एप्लिकेशन" के रूप में व्यवहार किया गया, विशुद्ध रूप से भेजने, और अधिक महत्वपूर्ण बात, सर्वर से डेटा को पुनः प्राप्त करना।

यह एक उपयोगी पैटर्न क्यों है? यह इस बात पर निर्भर करता है कि आपका उपयोगकर्ता इंटरफ़ेस कितना जटिल है, और आप इसकी स्थिरता के बारे में कितना ध्यान रखते हैं।

उन्नत सीएसएस के साथ एक नेत्रहीन बहुत समृद्ध रूप से चिह्नित इंटरफ़ेस का निर्माण करते समय, आखिरी चीज जिसे आप करना चाहते हैं, वह मार्कअप के टुकड़ों को "मिनी-कंट्रोलर / व्यूज़" में काट देता है, बस आप मुख्य दस्तावेज़ में .innerHTML दस्तावेज़ टुकड़े कर सकते हैं। दस्तावेज़, और यहाँ क्यों है।

एक उन्नत html / css उपयोगकर्ता इंटरफ़ेस प्रबंधनीय रखने का एक प्रमुख सिद्धांत, विकास के अपने सक्रिय चरण के दौरान कम से कम इसकी मान्यता को संरक्षित करना है। यदि आपका मार्कअप मान्य है, तो आप अपने CSS बग पर ध्यान केंद्रित कर सकते हैं। अब, यदि मार्कअप के टुकड़े उपयोगकर्ता-इंटरैक्शन के विभिन्न चरणों के दौरान अंतःक्षिप्त हो रहे हैं, तो यह सब प्रबंधित करने के लिए बहुत ही अस्पष्ट हो जाता है, और पूरी चीज भंगुर हो जाती है।

यह विचार था कि आपके सभी मार्कअप यूआई निर्माण एक ही दस्तावेज़ में हों, नेटवर्क पर केवल डेटा को पुनः प्राप्त करें, और एक ठोस फ्रेमवर्क का उपयोग करें जो आपके मार्कअप निर्माणों में बहुत कम से कम आपके डेटा को इंजेक्ट करेगा, और सबसे अधिक मार्कअप निर्माणों पर। जिसे आपने रिपीटेबल के रूप में चिह्नित किया।

यह IE5 + में XSL-T और XPath के साथ संभव था, लेकिन वस्तुतः कोई अन्य ब्राउज़र नहीं था। कुछ F / OSS ब्राउज़र चौखटे XPath के साथ डबिंग कर रहे हैं, लेकिन यह कुछ ऐसा नहीं है जिस पर हम अभी तक भरोसा कर सकते हैं।

तो इस तरह के पैटर्न को प्राप्त करने के लिए अगली सबसे अच्छी बात क्या है? IBDOM। अपने सर्वर से डेटा प्राप्त करें, इसे अपने दस्तावेज़ में इंजेक्ट करें। अनायास।


एक और बात: IBDOM 100% शुद्ध DOM तरीकों और शून्य इनरबाॅल का उपयोग करता है।
क्रिस हॉलैंड

एक और नोट: IBDOM मैं "forkedLoopExecution" को लागू करता है जो एक आंतरिक रूप से उपयोग किया जाने वाला घटक है और साथ ही कुछ ऐसा है जो अपने आप में उपयोग करने योग्य है। यहाँ समस्या थी: मान लें कि आप DOM को createElement और appendChild के माध्यम से संशोधित कर रहे हैं, कुछ प्रकार के लूपिंग निर्माण में, जिसे बड़ी डेटा ऑब्जेक्ट्स के काफी बड़े सरणी पर जाना है: अधिकांश ब्राउज़र उपयोगकर्ता इंटरफ़ेस को "फिर से दबाना" नहीं देंगे DOM- प्रभावित कोड "रिटर्न"। बहुत सारे डेटा के साथ "लूप के लिए" में, हमारे खोज परिणाम एक चैंक में पूरी चीज़ को प्रदर्शित करने से पहले कुछ सेकंड से लेकर कुछ सेकंड तक ध्यान देने योग्य हो सकते हैं।
क्रिस हॉलैंड

समाधान: फोर्क-लूप निष्पादन, प्रत्येक लूप पुनरावृत्ति में अनिवार्य रूप से "रिटर्न-एंड-रिपेंट" के लिए बार-बार पारित डेटा संग्रह के जीवन भर में सेट-आउट-प्रेरित-पुनरावर्ती निष्पादन का लाभ उठाता है, जिससे आपको यह त्वरित प्रतिपादन महसूस होता है: "उपयोगकर्ता को देखने के लिए कुछ दें -अब ठीक से फ्रिगिनिन करें ”।
क्रिस हॉलैंड

2

आपको जावास्क्रिप्ट-टेम्प्लेट्स पर एक नज़र डालनी चाहिए, यह प्रसिद्ध jQuery फ़ाइल अपलोड प्लगइन के भीतर उपयोग किया जाने वाला एक छोटा सा टेम्पलेट इंजन है, और उसी लेखक द्वारा विकसित किया गया है, सेबस्टियन सचान (@blueimp)

https://github.com/blueimp/JavaScript-Templates

सेबस्टियन द्वारा किए गए उपयोग गाइड का पालन करें , बस इस लाइन को हटा दें

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

इसे इस के साथ बदलें

$('#result').html(tmpl('tmpl-demo', data));

आप HTML फ़ाइल में div परिणाम टैग जोड़ना न भूलें

<div id="result"></div>

का आनंद लें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.