एचटीएमएल टेम्पलेट टैग और jQuery

Question

मैं इस स्थिति जहां मैं अपने HTML स्रोत में <template> टैग का उपयोग करने की कोशिश कर रहा हूँ मिल गया है:

<template id="some-id"> 
    <div id="content-container"> 
    <span>{{some_string}}</span> 
    <div> 
</template> 

इस दस्तावेज़ में टेम्पलेट रखने समाप्त होता है, लेकिन यह नहीं माना जाता है डोम में होना इसका अर्थ यह है कि $ ("# सामग्री-कंटेनर") उन ब्राउज़रों में नहीं मिलता है जो टेम्पलेट टैग का समर्थन करते हैं। अगर मैं के लिए खोज:

$("#some-id") 

मैं इस वापस पाने:

<template id=​"some-id">​ 
    #document-fragment 
    <div id="content-container"> 
     <span>{{some_string}}</span> 
    <div> 
</template>​ 

इस में से कोई भी मुझे तो हैरानी। मुझे यह जानने की ज़रूरत है कि दस्तावेज़-खंड की सामग्री को क्लोन करना है और एक नया नोड है, फिर मैं डोम में रह सकता हूं जहां मैं इसे चाहता हूं।

मुझे यह w/o jQuery करने के उदाहरणों के उदाहरण मिल गए हैं लेकिन इस सामग्री के आस-पास के अधिकांश कोड पहले ही jQuery का उपयोग कर रहे हैं और मुझे यह जानने की आवश्यकता है कि ऐसा करने के लिए jQuery का उपयोग कैसे करें।

stuff = $("#some-id").html() 
new_node = $(stuff) 

यह निम्न त्रुटियों में परिणाम:

Error: Syntax error, unrecognized expression: <the html string> 

मैं अगर पता नहीं है

मेरी पहली सोचा एचटीएमएल और फिर एक नए नोड बनाने के लिए इसका उपयोग किया गया त्रुटि मूंछ वाक्यविन्यास के कारण होती है या नहीं। मुझे लगता है कि इस व्यवहार के लिए कहीं भी एक jQuery समाधान होना है, लेकिन जब मैं Google के साथ खोज करता हूं तो मुझे jQuery टेम्पलेट्स के लिए हिट के पागलपन मिलते हैं, जो अलग हैं।

क्या किसी के पास साइट्स/पेजों पर विचार, उत्तर या पॉइंटर्स हैं जो इस माध्यम से मेरी सहायता करेंगे? मैं कुछ हैकिश को एक साथ जोड़ने से बचने की कोशिश कर रहा हूं।

संपादित करें: मैं इस समाधान को ढूंढने में समाप्त हुआ (मैं अभी भी यह सुनिश्चित करने के लिए परीक्षण कर रहा हूं कि यह एक समाधान है लेकिन यह आशाजनक लगता है);

template = $("#some-id") 
content = template.html() 
new_div = $("<div></div>") 
new_div.html(content) 

मैं उस div के साथ समाप्त होता हूं जिसे मुझे वास्तव में पहले की आवश्यकता नहीं थी लेकिन मैं इसके साथ रह सकता हूं। लेकिन इस तरह के kludgy लगता है। क्या किसी के पास इसका बेहतर दृष्टिकोण है? उलझन यह है कि यह अभी भी उन ब्राउज़रों में काम करेगा जिन्होंने अभी तक टेम्पलेट टैग व्यवहार को अनुकूलित नहीं किया है।

धन्यवाद!

Answer 1

प्रयास करें:

var myTemplate = $("#some-id").html().trim(); 
var myTemplateClone = $(myTemplate); 

Answer 2

मुझे विश्वास है कि इस साइट में मदद मिलेगी बताएं कि किस तरह छाया डोम काम करता है और कैसे टेम्पलेट्स उन लोगों के साथ बातचीत करते हैं। http://robdodson.me/blog/2013/08/27/shadow-dom-the-basics/

इसके अलावा यह वास्तव में एक छाया टेम्पलेट के नोड को क्लोन करना और jquery का उपयोग करने की आवश्यकता नहीं है।

यहाँ एक jfiddle कि यह दर्शाता है है यह: http://jsfiddle.net/dtracers/fhWc3/1/

HTML:

<div id = "hoster"> 
    <span class = "title">Title</span> 
    <span class = "id">51ab89af</span> 
</div> 

<template id = "im-a-template"> 
    <h1><content select =".title"></content></h1> 
    <h1>Class Id: <content select = ".id"></content></h1> 
    <input type="text" placeholder = "Name"></input> 
</template> 

जावास्क्रिप्ट:।

// find where you want to put your shadow dom in 
var host = document.querySelector('#hoster'); 

var root = host.createShadowRoot(); // create the host root 

var template = document.querySelector('#im-a-template'); 

// this is the node of the object you wanted 
var documentFragment = template.content; 

// this is a cloned version of the object that you can use anywhere. 
var templateClone = documentFragment.cloneNode(true); 

root.appendChild(templateClone); // this empty root now has your template