html şablon etiketi ve jquery

Question

benim html kaynağı <template> etiketini kullanmaya çalışıyorum bu durum var:

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

Bu belgede şablon yerleştirerek biter ama kabul edilmez DOM'da olmak. Bu, şablon etiketlerini destekleyen tarayıcılarda $ ("# content-container") bulunmadığı anlamına gelir. Ben ararsanız:

$("#some-id") 

Bunu geri almak: Bunun

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

Yok beni şaşırtıyor. Ne yapmam gerektiğini bilmem gereken belge fragmanının içeriğini klonlamak ve daha sonra istediğim yerde DOM'a yapışabildiğim yeni bir düğüme sahip olmak.

Bu w/o jQuery öğesinin nasıl yapılacağına dair örnekler buldum ancak bu nesnenin etrafındaki kodun çoğu jQuery'yi kullanıyor ve bunu yapmak için jQuery'yi nasıl kullanacağımı bilmem gerekiyor.

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

Bu aşağıdaki hatalara yol açar:

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

ben bilmiyorum

ilk düşüncem yeni bir düğüm oluşturmak için kullanırlar html almak ve etmekti hata bıyık sözdizimi tarafından kaynaklanır veya değil. Bu davranışa bir yerde bir jQuery çözümü olması gerektiğini düşünüyorum ama Google ile arama yaptığımda farklı olan jQuery Şablonları için isabet craploads aldım.

Bu konuda bana yardımcı olacak sitelerin/sayfaların düşünceleri, yanıtları veya işaretçileri var mı? Bir şeyleri hackish olarak bir araya getirmekten kaçınmaya çalışıyorum.

DÜZENLEME: Bu çözümü bulmayı bitirdim (Hala bir çözüm olduğundan emin olmak için test ediyorum ama umut verici görünüyor);

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

Daha önce gerçekten ihtiyaç duymadığım bir div içeren son buluyorum ama bununla yaşayabiliyorum. Ama bu tür kludgy hissediyor. Bunun daha iyi bir yaklaşımı var mı? Bunun tersi, şablon etiketi davranışını henüz tam olarak uyarlamayan tarayıcılarda çalışmaya devam etmesidir.

Teşekkürler!

Answer 1

Dene:

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

Answer 2

Ben şablonları onlarla nasıl etkileşimde gölge dom nasıl çalıştığını ve bu site açıklanmasına yardımcı olacağına inanıyoruz. http://robdodson.me/blog/2013/08/27/shadow-dom-the-basics/

Ayrıca, bir gölge şablonunun düğümünü klonlamak gerçekten çok basittir ve jquery kullanmak bile gerekli değildir.İşte

gösteren bir jfiddle olan o: 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