HTML模板標籤和jQuery

Question

我有這個情況下，我嘗試使用<template>標記在我的HTML源代碼：

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

這最終將模板文件中，但它不被視爲在DOM中。這意味着在支持模板標籤的瀏覽器中找不到$（「＃content-container」）。如果我搜索：

$("#some-id") 

我得到這個回：

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

這些都沒有令我感到奇怪。我需要知道如何做的是克隆文檔片段的內容，然後創建一個新的節點，然後將其粘貼到我想要的DOM上。

我已經找到了如何做這個沒有jQuery的例子，但圍繞這個東西的許多代碼已經使用jQuery，我需要知道如何使用jQuery來做到這一點。

我首先想到的是要獲取HTML，然後用它來創建一個新的節點：

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，但我可以忍受。但是這種感覺很糟糕。有沒有人有更好的方法呢？好處是，它仍然可以在尚未完全適應模板標籤行爲的瀏覽器中工作。

謝謝！

Answer 1

嘗試：

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

Answer 2

我相信，這個網站將有助於解釋影子DOM是如何工作和模板如何與他們進行互動。 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> 

的Javascript：

// 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