jQuery अस्थायी इंजन [बंद]

Question

मैं ग्राहक पक्ष का उपयोग करने के लिए टेम्पलेट इंजन की तलाश कर रहा हूं। मैं jsRepeater और jQuery के टेम्प्लेट जैसे कुछ प्रयास कर रहा हूं। जबकि वे फ़ायरफ़ॉक्स में ठीक काम करने लगते हैं, वे सभी IE7 में टूटने लगते हैं जब यह HTML तालिकाओं को रेंडर करने के लिए नीचे आता है।

मैंने MicrosoftAjaxTemplates.js ( http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 से ) पर एक नज़र डाली, लेकिन पता चला कि एक ही समस्या है।

अन्य templating इंजन पर किसी भी सलाह का उपयोग करने के लिए?

Comments

मैं इस सवाल को दो बार उठाना चाहता था :)

— मार्क

मैं बहुत अच्छा (लेकिन पूर्व-बीटा) JSViews और JSRender की जांच करूंगा, एक संभावित आधिकारिक JQuery / UI टेम्प्लेटिंग इंजन की तरह प्रतीत होगा (कम से कम यह रोडमैप कहता है)

— एरन मेडन

JsRender में अब एक सार्वजनिक बीटा उम्मीदवार है: borismoore.com/2012/03/…

— जॉन पापा

मैं अब DoT टेम्पलेट्स का उपयोग कर रहा हूं, अच्छा प्रदर्शन, और संकेतन की तरह मूंछें

— Eran Medan

Answer 1

रिक स्ट्राल के पोस्ट क्लाइंट को jQuery के साथ अस्थायी रूप से देखें । वह jTemplates की खोज करता है, लेकिन फिर जॉन रेजिग के माइक्रो-टेम्पलेटिंग समाधान के लिए एक बेहतर मामला बनाता है , यहां तक ​​कि इसे कुछ सुधार भी करता है। अच्छी तुलना, बहुत सारे नमूने।

Comments

github.com/jquery/jquery-tmpl , Resig के टेम्प्लेटिंग प्लगइन का वास्तविक रेपो है।

— अलेक्जेंडर बर्ड

@ Thr4wn, रेप्रो में स्रोत काफी है तो पुस्तकालय ने जुड़े लेखों में चर्चा की। हालांकि, दोनों Resig द्वारा, सुनिश्चित करें।

— फ्रैंक श्वाइटमैन

@Frank "रेप्रो पर स्रोत काफी है तो पुस्तकालय से जुड़े लेखों में चर्चा की" उम हुह? क्या कहना? निश्चित नहीं है कि आप इसका क्या मतलब है।

— मार्क शुल्त्स

@ मर्क: उनका मतलब "काफी अलग था।"

— डोमोनिक

मैंने इसके साथ बनाए जा रहे जटिल रूपों का कोई उदाहरण नहीं देखा है। क्या किसी ने इस बात का पता लगाया है कि एक वस्तु के सरणी के रूप में एक नए तत्व को समायोजित करने के लिए एक पंक्ति, एक पूरे टेम्पलेट के कुछ भाग को जोड़ने के लिए क्या होगा? टेम्प्लेट में सरणियों के तत्व अनुक्रमकों को शामिल किया जाएगा और पोस्टिंग के लिए ठीक से क्रमबद्ध किया जा सकता है। लेकिन मुझे यह सब सोचने में परेशानी हो रही है। लक्ष्य InfoPath जैसी कार्यक्षमता है। (मैं विभिन्न मौजूदा इन्फोपैथ सुविधाओं और अनन्त विकल्प के बारे में जानता हूँ।)

— जेसन क्लबन

Answer 2

बस इस पर कुछ शोध किया और मैं jquery-tmpl का उपयोग करूँगा । क्यों?

1. इसे जॉन रेजिग ने लिखा है।
2. इसे "आधिकारिक" प्लगइन के रूप में कोर jQuery टीम द्वारा बनाए रखा जाएगा। संपादित करें: jQuery टीम ने इस प्लगइन को हटा दिया है।
3. यह सादगी और कार्यक्षमता के बीच एक सही संतुलन बनाता है।
4. यह एक बहुत साफ और अच्छी तरह से सोचा वाक्य रचना है।
5. यह डिफ़ॉल्ट रूप से HTML- एन्कोड करता है।
6. यह बेहद एक्स्टेंसिबल है।

यहाँ और अधिक: http://forum.jquery.com/topic/templating-syntax

Comments

+1। लेकिन मैंने रिक स्ट्राल का इस्तेमाल किया। Bcoz यह एक छोटा सा है और मेरे उद्देश्य को अच्छी तरह से परोसता है।

— इस्माइल जूल

यह सिर्फ घोषणा की गई थी कि यह अब

— सर्ग

दुर्भाग्य से, यह मूल्यह्रास किया गया था । कोई फोरकर?

— ओनेसिमसुबाउंड

क्या 2012 में अब परिदृश्य बदल गया है, मेरा मतलब है कि रेजिग की मूल लिपि के शीर्ष पर विकसित पुस्तकालयों का उपयोग करके टेंपलेट करने के लिए बेहतर समाधान हैं?

— रजत गुप्ता

@OnesimusUnbound इसे जेएस रेंडर ने सुपर सीड किया है। github.com/BorisMoore/jsrender

— Blowsie

Answer 3

jQote: http://aefxx.com/jquery-plugins/jqote/

किसी ने रेजिग के माइक्रो-टेम्प्लेटिंग समाधान को लिया और इसे एक jQuery प्लगइन में पैक किया।

मैं इसका उपयोग तब तक करता रहूंगा जब तक कि Resig अपनी खुद की (यदि वह अपनी खुद की रिलीज) जारी कर देता है।

टिप के लिए धन्यवाद, ewbi।

Comments

यह अब jQote2 बन गया है: aefxx.com/jquery-plugins/jqote2

— एलेक्स एंगस

Answer 4

jQuery नैनो :

साँचा इंजन

मूल उपयोग

मान लें कि आपके पास JSON प्रतिक्रिया है:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

आप बना सकते:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

और तुम तैयार हो जाओ स्ट्रिंग:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

परीक्षण पृष्ठ ...

Comments

यह नियंत्रण संरचनाओं (

— ifs

Answer 5

jQuery-tmpl jQuery 1.5 में jQuery कोर शुरुआत में होगा:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

आधिकारिक दस्तावेज यहां है:

http://api.jquery.com/category/plugins/templates/

---

संपादित करें: इसे jQuery 1.5 से बाहर रखा गया है और अब इसे jQuery UI टीम द्वारा समन्वित किया जाएगा, क्योंकि यह आगामी jQuery UI ग्रिड की निर्भरता होगी।

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Answer 6

सुनिश्चित नहीं है कि यह आपकी विशिष्ट समस्या को कैसे संभालता है, लेकिन PURE टेम्पलेट इंजन भी है।

Comments

अपनी सीमाओं के अलावा, PURE का उपयोग करना बहुत आसान है

— Jader Dias

@ जेडर, कौन सी सीमाएं सबसे दर्दनाक हैं?

— माइक

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

— जादेर डायस

@Jader, केवल HTML के लिए ठीक है। लेकिन मुझे वह नहीं मिला जो आप quirks और किसी अन्य इंजन से करते हैं।

— माइक

कुछ सुविधाओं को शामिल करने की अनुमति देने के लिए @Mic PURE को स्क्रैच से फिर से लिखना होगा। अमान्य HTML टेम्प्लेट की अनुमति देने के लिए आपको अलग-अलग scriptविशेषताओं वाले टैग का उपयोग करना चाहिए । यह एक "क्विक" है जो अमान्य HTML की अनुमति देगा। typetext/javascript

— Jader Dias

Answer 7

यह इस बात पर निर्भर करता है कि आप "सर्वश्रेष्ठ" कैसे परिभाषित करते हैं, कृपया इस विषय पर मेरी पोस्ट यहाँ देखें

यदि आप सबसे तेज़ खोजते हैं , तो यहां एक अच्छा बेंचमार्क है , ऐसा लगता है कि DoT जीतता है, और बाकी सभी को पीछे छोड़ देता है

यदि आप सबसे आधिकारिक JQuery प्लगइन की तलाश कर रहे हैं , तो यहां मुझे पता चला है

भाग I: JQuery के टेम्पलेट

बीटा, अस्थायी रूप से आधिकारिक JQuery टेम्पलेट प्लगइन यह http://api.jquery.com/category/plugins/nemem// था

लेकिन जाहिरा तौर पर, बहुत पहले नहीं इसे बीटा में रखने का फैसला किया गया था ...

नोट: jQuery की टीम ने इस प्लगइन को पिछले बीटा में नहीं लेने का फैसला किया है। यह अब सक्रिय रूप से विकसित या रखरखाव नहीं किया जा रहा है। जब तक उपयुक्त रिप्लेसमेंट टेम्प्लेट प्लगइन तैयार नहीं हो जाता तब तक डॉक्स यहां (संदर्भ के लिए) रहता है।

भाग II: अगला चरण

नई योजना प्लगइन्स का एक नया सेट के लिए लक्ष्य लगते हैं, JSRender (डोम के स्वतंत्र और यहां तक कि JQuery टेम्पलेट प्रतिपादन इंजन) और JSViews जो बंधन और पर्यवेक्षक / नमूदार पैटर्न कार्यान्वयन कुछ अच्छा डेटा है

यहाँ विषय पर ब्लॉग पोस्ट है

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

और यहाँ नवीनतम स्रोत है

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

अन्य संसाधन

• विषय पर एक अच्छी प्रस्तुति http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• वर्किंग डेमो: http://borismoore.github.com/jsviews/demos/index.html

ध्यान दें कि यह अभी भी बीटा में नहीं है, और केवल एक रोड मैप आइटम है, लेकिन टेम्पलेट और यूआई बाइंडिंग के लिए आधिकारिक JQuery / JQueryUI एक्सटेंशन बनने के लिए एक अच्छे उम्मीदवार की तरह लगता है

Answer 8

केवल मूर्ख बनने के लिए ^ ^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

Answer 9

यह jsquery विशिष्ट नहीं है, लेकिन यहाँ एक JS-templating पुस्तकालय है जिसे गूगल ने खुले स्रोत के रूप में जारी किया है:

http://code.google.com/p/google-jstemplate/

यह DOM तत्वों को टेम्प्लेट के रूप में उपयोग करने की अनुमति देता है, और फिर से प्रवेश करता है (इसमें एक टेम्प्लेट रेंडरिंग का आउटपुट अभी भी एक टेम्प्लेट है जिसे एक अलग डेटा मॉडल के साथ री-रेंडर किया जा सकता है)।

Answer 10

दूसरों ने jquery-tmpl को इंगित किया है, और मैंने उन उत्तर को उत्कीर्ण किया है। लेकिन github कांटे पर एक नज़र रखना सुनिश्चित करें।

वहाँ महत्वपूर्ण सुधार और दिलचस्प विशेषताएं भी हैं। http://github.com/jquery/jquery-tmpl/network

Comments

फिक्स के लिए देखने के लिए कोई विशेष कांटा?

— केविन हैकसन

टीबीएच, यह थोड़ा गड़बड़ है ... मैं परिवर्तन पर त्वरित स्कैन के बाद github.com/appendto/jquery-tmpl के लिए गया था और इस तथ्य पर विचार करते हुए कि अपेंडो एक कंपनी है। YMMV

— Yann

jquery-tmpl को आधिकारिक 1.4.3 वितरण में जोड़ दिया गया है।

— यन

Answer 11

जॉन रेसिग ने अपने ब्लॉग पर एक पोस्ट किया है। http://ejohn.org/blog/javascript-micro-templating/

Answer 12

आप .NET फ्रेमवर्क 2.0 / 3.5 में काम कर रहे हैं, तो आप के रूप में द्वारा कार्यान्वित JBST पर एक नज़र रखना चाहिए http://JsonFx.net । इसका एक क्लाइंट-साइड टेंपलेटिंग सॉल्यूशन है, जिसमें JSP / ASP सिंटैक्स का परिचित है, लेकिन कॉम्पैक्ट कैश-सक्षम टेम्प्लेट के लिए बिल्ड-टाइम पर precompiled है जिसे रनटाइम पर पार्स करने की आवश्यकता नहीं है। यह jQuery और अन्य जावास्क्रिप्ट पुस्तकालयों के साथ अच्छी तरह से काम करता है क्योंकि टेम्पलेट स्वयं शुद्ध जावास्क्रिप्ट के लिए संकलित किए जाते हैं।

Answer 13

मैं jtemplates jquery प्लगिंग का उपयोग कर रहा था लेकिन प्रदर्शन वास्तव में खराब था। मैंने ट्रिम्पैथ ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) पर स्विच किया, जिसमें बेहतर प्रदर्शन है। मैंने IE7 या FF के साथ किसी भी मुद्दे पर ध्यान नहीं दिया है।

Answer 14

बहुत हल्के काम के लिए jquery-tmpl पर्याप्त है, लेकिन इसके लिए कुछ मामलों में यह आवश्यक है कि डेटा को पता हो कि कैसे (खराब चीज़!) प्रारूपित किया जाता है।

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

ओह, और आसान वाक्यविन्यास।

Answer 15

आप थोड़ा सोच सकते हैं कि आप अपने टेम्प्लेट कैसे डिज़ाइन करना चाहते हैं।

सूचीबद्ध टेम्पलेट समाधान (jQote, jquery-tmpl, jTemplates) के कई मुद्दों के साथ एक मुद्दा यह है कि उन्हें आपके HTML में गैर-HTML सम्मिलित करने की आवश्यकता होती है, जो HTML टूल में या HTML डिजाइनरों के साथ विकास प्रक्रिया में काम करने के लिए एक दर्द हो सकता है । मुझे व्यक्तिगत रूप से उस दृष्टिकोण की अनुभूति पसंद नहीं है, हालांकि इसके पक्ष और विपक्ष हैं।

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

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

एक अन्य उत्तर के रूप में सूचीबद्ध PURE इस दृष्टिकोण का एक और उदाहरण है।

संदर्भ के लिए आप chain.js पर भी देख सकते हैं , लेकिन लगता नहीं है कि इसकी मूल रिलीज के बाद इसे बहुत अपडेट किया गया है। इस पर अधिक पृष्ठभूमि के लिए http://javascriptly.com/2008/08/a-better-javascript-template-engine/ देखें ।

Answer 16

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

धन्यवाद। आशा है कि यह किसी के लिए उपयोगी होगा।

Answer 17

मैं वर्तमान में एक मल्टी HTML टेम्प्लेटिंग फ्रेमवर्क का उपयोग कर रहा हूं। यह ढाँचा आपके DOM में अस्थायी डेटा आयात करना बहुत आसान बनाता है। इसके अलावा महान एमवीसी मॉडलिंग।

http://www.enfusion-framework.org/ (नमूनों को देखें!)

Answer 18

Beebole द्वारा PURE का पुनर्लेखन भी है - jquery शुद्ध html टेम्पलेट - https://github.com/mpapis/jquery-pure-templates

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