Question

我遇到过这种情况，我试图在我的html源代码中使用<template>标记：

<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

html模板标签和jquery

2 个答案: