टेक्स्ट को प्रतिबिंबित करने के लिए jQuery का उपयोग

Question

क्या स्क्रिप्ट टैग के स्थान पर पाठ को गूंजने के लिए jQuery का उपयोग करना संभव है? दरअसल, वहाँ

<script type="text/javascript"> 
    document.write("foo"); 
</script> 

... पूरा करने के लिए document.write के उपयोग के बिना एक तरीका है? this पढ़ने के बाद document.write का उपयोग करने में मुझे खुशी नहीं है।

मुझे पता है कि मैं वैकल्पिक रूप से ऐसा कर सकता है कर रहा हूँ:

<span id="container"></span> 
<script type="text/javascript"> 
    $("#container").text("foo"); 
</script> 

हालांकि, मैं वहाँ एक कंटेनर तत्व का उपयोग, खासकर jQuery का उपयोग किए बिना यह करने के लिए कोई तरीका है देखने के लिए इच्छुक हूँ।

अग्रिम धन्यवाद!

Answer 1

हां, और नहीं, जो आप चाहते हैं, नहीं।

1. आप इसे एक सच्चे कंटेनर बिना कुछ करने के लिए पाठ गूंज मिल सकता है, हाँ (देखें: DocumentFragment)।

2. क्या यह आपके दस्तावेज़ में दिखाई देगा ... नहीं। ऐसा इसलिए है क्योंकि यह नहीं बताया गया है कि इसे कहां रखा जाना चाहिए। एचटीएमएल में स्क्रिप्ट टैग सीधे पैरामीटर के रूप में अपनी स्थिति को बनाए नहीं रखते हैं, इसलिए आप अंतिम टैग ढूंढने और टेक्स्टनोड को वहां रखने के लिए चारों ओर झुका सकते हैं, हालांकि, यह मुश्किल और छोटी हो सकती है।

इसके बजाय आप क्या कर सकते हैं, "document.body.onLoad" जैसी घटना तक डोम को संशोधित न करने का सामान्य अभ्यास है। यह एक आम प्रथा है, और आम तौर पर अजाक्स के लिए जाने का तरीका है।

यदि इनमें से कोई भी आपके लिए उपयुक्त नहीं है, तो दुर्लभ सम्मिलन का उपयोग करें(), jquery एक आईडी के साथ आपके स्क्रिप्ट तत्व पर इसके बाद तुलनात्मक समर्थन प्रदान करता है।

<script id="flail"> 
var flail=document.getElementById("flail"); 
flail.parentNode.insertBefore(document.createTextNode("TEST"),flail) 
</script> 

नोट: यह आम तौर पर एक बुरा व्यवहार के रूप में यह फांसी भार बना सकते हैं, और इस उत्पादन के बिना सुसंगत नहीं होने के लिए html पृष्ठ प्रोत्साहित करती है। हालांकि, सभी चीजों की तरह, इसके उपयोग के लिए मामले हैं।

Answer 2

यदि आप document.write() करने के jQuery तरीके से आते हैं, तो यह सभी कारणों से खराब होगा।

आप document.write() का उपयोग कर बेहतर हैं, अगर आपको किसी मौजूदा तत्व में हेरफेर करना या डीओएम में कहीं नया तत्व जोड़ना बेहतर है, तो यह है कि यह jQuery पर अच्छा है।

Answer 3

मेरा सुझाव है कि आप सूक्ष्म टेम्पलेट इंजन को John Resig, jquery संस्थापक द्वारा कार्यान्वित करने का सुझाव दें।

पूर्ण प्लगइन

// Simple JavaScript Templating 
// John Resig - http://ejohn.org/ - MIT Licensed 
(function() { 
    var cache = {}; 

    this.tmpl = function tmpl(str, data) { 
     // Figure out if we're getting a template, or if we need to 
     // load the template - and be sure to cache the result. 
     var fn = !/\W/.test(str) ? 
       cache[str] = cache[str] || 
       tmpl(document.getElementById(str).innerHTML) : 
       // Generate a reusable function that will serve as a template 
       // generator (and which will be cached). 
       new Function("obj", 
       "var p=[],print=function(){p.push.apply(p,arguments);};" + 
       // Introduce the data as local variables using with(){} 
       "with(obj){p.push('" + 
       // Convert the template into pure JavaScript 
       str 
       .replace(/[\r\t\n]/g, " ") 
       .split("<%").join("\t") 
       .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
       .replace(/\t=(.*?)%>/g, "',$1,'") 
       .split("\t").join("');") 
       .split("%>").join("p.push('") 
       .split("\r").join("\\'") 
       + "');}return p.join('');"); 

     // Provide some basic currying to the user 
     return data ? fn(data) : fn; 
    }; 
})(); 

उपयोग

महत्वपूर्ण: लाइनों केवल \

var tpl = '\ 
    <div id="myTemplate">\ 
     <%\ var selectorIndex = 0;\ %>\ 
      <ul>\ 
       <% if(selectorIndex == 0){ %>\ 
       <li>this is echo text for zero</li>\ 
       <% } else{ %>\ 
       <li>this is echo text for something else</li>\ 
       <% } %>\ 
      </ul>\ 
    </div>\ 
'; 

$(body).html(tmpl(tpl,{'extraData':'here'})); 

और जानकारी के साथ तोड़

http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line

stackoverflow पर संबंधित प्रश्नों

Syntax Error with John Resig's Micro Templating after changing template tags <# {% {{ etc