问题标签 [html5-template]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

109 问题
Newest
Active
Bountied
318
Unanswered
0 投票
2 回答
1295 浏览

javascript - HTML 模板（自定义）标签

我知道由于各种原因使用自定义 html 标签是不合适的，但我想由你运行一个特定的情况，这可能需要一个自定义 html 标签，并希望得到告知，或者可能是实现我目标的更好方法。

在我的代码中，我有我称之为模板的东西，它由一个带有模板的 div 标签和一个附加到它的隐藏类组成。这在屏幕上不可见，但基本上这些“模板”标签包含我在 Javascript 中用于创建各种不同项目的 html。我这样做是为了可以在 html 中设置模板的样式，而不必担心将 CSS 与我的 Javascript 混合。

在javascript中我会做类似的事情

我宁愿能够做这样的事情

因此，如果我在一个 div 中有多个模板，我可以将它们全部抓取，而不必为它们提供唯一的类名。当然，我需要一个实现的理由比这要深得多，但没必要在细节上浪费你的时间。让我们说这将有助于清理我的 Javascript ALOT。

因为自定义模板标签是隐藏的，实际上只不过是一个容器，可以方便地在 javascript 中使用 document.getElementsByTagName("template"); 调用。这可以吗？我可能会在标签前面加上一个自定义名称，以防模板被实现到 html 中。

0 投票
2 回答
18197 浏览

jquery - html template tag and jquery

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

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:

I get this back:

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:

This results in the following errors:

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);

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!

0 投票
4 回答
9314 浏览

javascript - HTML 模板 JavaScript polyfills

我正在寻找最符合标准/面向未来的前端 HTML 模板方法。

HTML 模板存在一个相对较新的W3C 草案规范，例如：

有谁知道是否已经存在任何好的JavaScript polyfills以使 <template>元素以跨浏览器的方式可用？最好符合本标准。

困难

根据HTML5Rocks 指南，这些模板具有以下属性：

  • “它的内容在被激活之前实际上是惰性的”
  • “脚本不运行，图像不加载，音频不播放，”
  • “内容被认为不在文档中”
  • "模板可以放置在<head>, <body>, 或<frameset>"

我认为完全使用 JavaScript polyfill 实现所有这四个属性是不可能的，所以任何解决方案都只是部分的。

0 投票
2 回答
2281 浏览

javascript - document.getElementById 不适用于