HTML模板标记和jQuery [英] html template tag and jquery

问题描述

我遇到了这种情况，我试图在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中。

我已经找到了如何做这个W / O jQuery的例子，但围绕这个东西的许多代码已经使用jQuery，我需要知道如何使用jQuery来做到这一点。

我的第一个想法是获取html，然后用它创建一个新节点：

  stuff = $（＃some-id）。html（）
 new_node = $（stuff）
  

这会导致以下错误：

 错误：语法错误，无法识别的表达式： < html字符串> 
  

我不知道错误是否是由胡子语法造成的。我认为必须有一个jQuery解决方案来解决这种行为，但是当我使用Google搜索时，我得到了jQuery模板的点击量不同。

有没有人有想法，答案或指向网站/网页，将帮助我通过这个？编辑：我最终找到了这个解决方案（我仍然在测试它，以确保它是一个解决方案，但它）;
$ b

  template = $（＃some-id）
 content = template.html（） 
 new_div = $（< div>< / div>）
 new_div.html（内容）
  

我最终得到的是包含以前并不需要的div，但我可以忍受这一点。但是这种感觉很糟糕。有没有人有更好的方法呢？好处是，它仍然可以在尚未完全适应模板标记行为的浏览器中工作。

谢谢！

解决方案

试试：

  var myTemplate = $（＃some-id ）。html的（）修剪（）; 
 var myTemplateClone = $（myTemplate）; 
  

I've got this situation where I'm trying to use the <template> tag in my html source:

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

This ends up placing the template in the document but it is not considered to be in the DOM. This means that $("#content-container") is not found in browsers that support template tags. If I search for:

$("#some-id")

I get this back:

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

None of this surprises me. What I need to know how to do is to clone the contents of the document-fragment and have a fresh node I can then stick into the DOM where I want it.

I have found examples of how to do this w/o jQuery but much of the code around this stuff is already using jQuery and I need to know how to use jQuery to do this.

My first thought was to get the html and then use it to create a new node:

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

This results in the following errors:

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

I don't know if the error is caused by the mustache syntax or not. I figure there has to be a jQuery solution to this behavior somewhere but when I search with Google I get craploads of hits for jQuery Templates, which are different.

Does anyone have thoughts, answers or pointers to sites/pages that will help me through this? I'm trying to avoid cobbling together something hackish.

EDIT: I ended up finding this solution (I'm still testing it to make sure it IS a solution but it looks promising);

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

I end up with that containing div that I didn't really need previously but I can live with that. But this kind of feels kludgy. Does anyone have a better approach to this? The upside is that it will still work in browsers that haven't adapted the template tag behavior fully yet.

thanks!

解决方案

Try:

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

这篇关于HTML模板标记和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！