html szablon tag i jquery

Question

Mam tę sytuację, w której próbuję użyć tagu <template> w moim źródła html:

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

ten kończy się umieszczając szablon w dokumencie, ale to nie jest uważane być w DOM. Oznacza to, że $ ("# content-container") nie znajduje się w przeglądarkach obsługujących tagi szablonów. Gdybym szukać:

$("#some-id") 

dostanę to z powrotem:

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

Nic z tego nie dziwi mnie. Muszę wiedzieć, jak to zrobić, aby sklonować zawartość fragmentu dokumentu i mieć nowy węzeł, który następnie będę mógł wkleić w DOM tam, gdzie chcę.

Znalazłem przykłady, jak to zrobić bez jQuery, ale znaczna część kodu wokół tego materiału już używa jQuery i muszę wiedzieć, jak użyć jQuery, aby to zrobić.

Moją pierwszą myślą było uzyskać html, a następnie użyć go do stworzenia nowego węzła:

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

Wynika to z następujących błędów:

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

nie wiem, czy błąd jest spowodowany składnią wąsów lub nie. Sądzę, że musi istnieć rozwiązanie jQuery do tego zachowania, ale kiedy szukam w Google, otrzymuję craploads trafień dla szablonów jQuery, które są różne.

Czy ktoś ma myśli, odpowiedzi lub wskazówki do stron/stron, które mi w tym pomogą? Staram się unikać robienia razem czegoś hackowskiego.

EDYCJA: Skończyło się na znalezieniu tego rozwiązania (nadal testuję to, aby upewnić się, że jest to rozwiązanie, ale wygląda obiecująco);

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

Kończę z tym zawierającym div, którego tak naprawdę nie potrzebowałem wcześniej, ale mogę z tym żyć. Ale ten rodzaj czuje się kludgy. Czy ktoś ma lepsze podejście do tego? Plusem jest to, że nadal będzie działać w przeglądarkach, które jeszcze nie dostosowały zachowania znaczników szablonów.

dziękuję!

Answer 1

Spróbuj:

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

Answer 2

Wierzę, że ta strona pomoże wyjaśnić, jak dom cień działa i jak szablony interakcji z nimi. http://robdodson.me/blog/2013/08/27/shadow-dom-the-basics/

Ponadto klonowanie węzła szablonu cienia jest bardzo proste, a użycie jquery nie jest nawet potrzebne.

Oto jfiddle że pokazuje to: 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