html mẫu thẻ và jquery

Question

Tôi đã có tình trạng này, nơi tôi đang cố gắng để sử dụng thẻ <template> trong nguồn html của tôi:

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

này kết thúc lên đặt mẫu trong tài liệu nhưng nó không được coi là nằm trong DOM. Điều này có nghĩa là $ ("# content-container") không được tìm thấy trong các trình duyệt hỗ trợ thẻ mẫu. Nếu tôi tìm kiếm:

$("#some-id") 

tôi nhận được trở lại này:

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

Không ai trong số này làm tôi ngạc nhiên. Những gì tôi cần biết làm thế nào để làm là sao chép nội dung của đoạn tài liệu và có một nút mới, sau đó tôi có thể dính vào DOM nơi tôi muốn nó.

Tôi đã tìm thấy các ví dụ về cách thực hiện điều này bằng jQuery nhưng nhiều mã xung quanh công cụ này đã sử dụng jQuery và tôi cần biết cách sử dụng jQuery để thực hiện việc này.

Suy nghĩ đầu tiên của tôi là để có được những html và sau đó sử dụng nó để tạo ra một nút mới:

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

Điều này dẫn đến các lỗi sau đây:

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

Tôi không biết nếu lỗi là do cú pháp ria mép hay không. Tôi thấy có phải là một giải pháp jQuery cho hành vi này ở đâu đó nhưng khi tôi tìm kiếm với Google, tôi nhận được một loạt các lần truy cập cho các mẫu jQuery, khác nhau.

Có ai có suy nghĩ, câu trả lời hoặc gợi ý cho các trang web/trang sẽ giúp tôi thông qua điều này không? Tôi đang cố gắng để tránh cobbling với nhau một cái gì đó hackish.

EDIT: Tôi đã tìm ra giải pháp này (Tôi vẫn đang thử nghiệm nó để đảm bảo nó là một giải pháp nhưng có vẻ đầy hứa hẹn);

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

Tôi kết thúc với div chứa mà tôi không thực sự cần trước đây nhưng tôi có thể sống với điều đó. Nhưng loại cảm giác này kludgy. Có ai có một cách tiếp cận tốt hơn cho điều này? Nhược điểm là nó vẫn sẽ hoạt động trong các trình duyệt chưa hoàn toàn phù hợp với hành vi của thẻ mẫu.

cảm ơn!

Answer 1

Hãy thử:

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

Answer 2

Tôi tin rằng trang web này sẽ giúp giải thích cách dom bóng hoạt động và cách mẫu tương tác với họ. http://robdodson.me/blog/2013/08/27/shadow-dom-the-basics/

Hơn nữa, thực sự rất đơn giản để sao chép một nút của mẫu đổ bóng và sử dụng jquery thậm chí không cần thiết.

Đây là một jfiddle đó chứng tỏ nó: 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