问题标签 [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.

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 不适用于