2012-12-27 11 views
54

jQuery टेम्पलेट्स को कुछ समय से बहिष्कृत कर दिया गया है।2012 के लिए अनुशंसित jQuery टेम्पलेट्स?

मेरे पास जावास्क्रिप्ट ऑब्जेक्ट के रूप में कुछ डेटा है जिसे मैं HTML के रूप में प्रारूपित करना चाहता हूं और डोम में जोड़ना चाहता हूं। इन दिनों ऐसा करने का सबसे अच्छा तरीका क्या है?

  1. क्या मुझे एक HTML स्ट्रिंग बनाना चाहिए?
  2. क्या मुझे jQuery के माध्यम से तत्व बनाना चाहिए जैसे $('<li>',{id:'my-'+Id}).append($('<span>').text(myText))?
  3. क्या jQuery टेम्पलेट्स के लिए कोई प्रतिस्थापन या परिपक्व विकल्प है?
+4

[एपीआई डॉक्स] (http://api.jquery.com/jquery.tmpl/) जाहिरा तौर पर और भी अधिक पदावनत कर रहे हैं, वे कहते हैं कि सुविधा है "बीटा में"। – bfavaretto

+0

@bfavaretto: हाँ। कहते हैं [यहां] (https://github.com/jquery/jquery-tmpl) वे इसे पिछले बीटा नहीं ले रहे हैं। – mpen

+2

कुछ प्रदर्शन परीक्षण [परिणाम] (http://jsperf.com/2dom-manipulation-js-templating-vs-programatic-jquery) आपके तीन विकल्पों के लिए। – sfk

उत्तर

10

आप निश्चित रूप से Handlebars की कोशिश करनी चाहिए और/या Mustache

मैं Handlebars का उपयोग करते हैं, लेकिन वाक्य रचना काफी समान है।

104

इस तरह मैं अपनी परियोजनाओं में ऐसा है:

var cardTemplate = $("#cardTemplate").html(); 
var template = cardTemplate.format("http://example.com", "Link Title"); 
$("#container").append(template); 

string.format: चर स्थानापन्न करने

<script type="text/template" id="cardTemplate"> 
<div> 
    <a href="{0}">{1}</a> 
</div> 
</script> 

उपयोग String.Format:

अपने HTML में टेम्पलेट को परिभाषित करें

String.prototype.format = function() { 
    var args = arguments; 
    return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined' 
     ? args[number] 
     : match 
    ; 
    }); 
}; 

बहुत आसान, आप टेम्पलेट्स को भी जोड़ सकते हैं।

+6

जहां आवश्यक हो वहां HTML से आप कैसे बचते हैं? आपके उदाहरण में यदि '{0} 'में एक डबल-कोट है, तो आपने बस अपना HTML उड़ाया है। – mpen

+3

@ मार्क आप 'एस्केप()' कह सकते हैं।अगर मुझे कुछ छोटे टेम्पलेट्स से ज्यादा करने की ज़रूरत होती तो मैं निश्चित रूप से कुछ और मजबूत दिखता। मैंने इसे यहां कुछ ऐसा उदाहरण दिया है जो उपयोगी हो सकता है, क्योंकि यह मेरे लिए है। – sachleen

+0

भयानक .. हालांकि एक संदेह .. इसे

7

सभी तरह से टेम्पलेट्स, JSON मैन्युअल रूप से पार्स करने की कोशिश करने से कहीं अधिक आसान है। चूंकि मैंने इसमें योगदान दिया है, इसलिए मैं json2html के आंशिक हूं क्योंकि इसे टेम्पलेट्स को संकलित करने की आवश्यकता नहीं है और JSON और जावास्क्रिप्ट के अलावा कुछ भी नहीं उपयोग करता है।

http://json2html.com

+0

यहां वर्णित अन्य लोगों में से मुझे यह सबसे अच्छा लगता है। धन्यवाद! – bdwakefield