问题标签 [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.
javascript - 如何包含 HTML element within a Meteor Blaze Template?
I'm using Meteor, but would like to use some vanilla javascript/HTML code that uses the html template element.
I'm using Meteor, but would like to use some vanilla javascript/HTML code that uses the html template element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
When I try to include one inside a meteor template:
Meteor displays the following error:
Is there a way to include these in a Meteor template? I am aware I can include them within the body tag but its a bit unwieldy.
afaict this can't be done in Meteor because Meteor uses the template tag for exactly the reason it was designed, from your link:
The HTML template element is a mechanism for holding
client-side content that is not to be rendered when a page is loaded
but may subsequently be instantiated during runtime using JavaScript.
You should never see a <template>
tag actually appear in the DOM which will preclude you from manipulating it in the DOM later.
It sounds like you maybe trying to do something that Blaze itself has assumed responsibility for. Perhaps you can tell us what you want to do with your template and we can tell you how to do it in Meteor.
I'm using Meteor, but would like to use some vanilla javascript/HTML code that uses the html template element.
I'm using Meteor, but would like to use some vanilla javascript/HTML code that uses the html template element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template When I try to include one inside a meteor template: Meteor displays the following error: Is there a way to include these in a Meteor template? I am aware I can include them within the body tag but its a bit unwieldy.
afaict this can't be done in Meteor because Meteor uses the template tag for exactly the reason it was designed, from your link:
The HTML template element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
You should never see a <template>
tag actually appear in the DOM which will preclude you from manipulating it in the DOM later.
It sounds like you maybe trying to do something that Blaze itself has assumed responsibility for. Perhaps you can tell us what you want to do with your template and we can tell you how to do it in Meteor.
javascript - 将内容附加到模板标签中
我正在尝试将内容附加到模板标签中。我在用
getcontent 是返回响应的 ajax 调用,响应被解析并作为对象存储在 obj 变量中,
createFullList 为 ajax 响应中的每个元素创建 div 并将其附加到片段中,然后将片段附加到也返回的 div 中,
困扰我的是附加到模板中,它什么也没做,当我尝试复制它的内容时,它说它有 0 个孩子,如果我打印 div 的孩子,它会打印正确的数字。
为什么没有将内容附加到模板中?这是正确的方法还是有任何特定的方法可以正确地将内容附加到模板中?
javascript - HTML 模板元素:说明
我最近发现了 HTMLtemplate
元素,希望得到一些澄清。
据我所知,三个显着特征是:
template
未在屏幕上呈现template
没有进入 DOM- 在 the和它的内容之间有一个额外的
content
属性充当虚拟元素template
除了这些, a<template>
可能是 a div
,隐藏在屏幕和 DOM 之外。在这方面,用于利用 的 JavaScripttemplate
与尝试使用div
.
问题是,这是正确的吗?我问是因为:
- 我只需要在我自己的脑海中弄清楚
- 对于不支持的浏览器来说,伪造一个相对容易。
谢谢
javascript - 如何创建像表单元素一样的 Web 组件?
我正在尝试创建一个可在表单元素中使用的 Web 组件,该组件具有name
和value
. 我认识到我可以创建一个 Webextends
组件HTMLInputElement
:
但我正在尝试创建一个全新的元素。
创建常规 Web 组件时,您可以从常规HTMLElement
( HTMLElement.prototype
) 的原型创建它。这使我假设我可以使用HTMLInputElement
( HTMLInputElement.prototype
) 的原型创建不同的元素。您实际上extending
在输入元素的 API 时使用了该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素呢?
如果您查看常规输入字段的 shadow dom:
你可以看到里面有一个div。我知道这HTMLInputElement
有方法和属性、getter/setter 等。那么为什么当我尝试创建我的组件时,它不能成为表单中名称、值对的一部分?
这是我如何尝试创建此 Web 组件的示例:
请注意,他应该在支持 Web 组件的浏览器中进行测试。
为什么在表单中找不到名称、值对,如何创建自定义表单元素?
javascript - 如何将导入的样式表应用于自定义元素的模板标签内容?
这是我尝试使用的代码
但是imported stylesheet
dropzone.css没有被应用到template
标签内的内容,即类 dropzone没有从dropzone.css获取它的样式,所以导入文件中的样式没有被应用到标签div
内的元素。template
我也尝试将此链接标签放在模板标签中,但这也不起作用。
是否可以将导入的样式表应用于自定义元素的模板标签内容?
javascript - 香草网络组件结构
我正在研究构建香草网络组件。我以前使用过 Polymer,并且喜欢您可以在一个文件中为您的组件提供模板、样式和 JavaScript 的事实。如果可能的话,我想用“香草”网络组件来实现这一点,但不知道怎么做。我已从此处获取代码并将其添加到我正在使用的文件中,如下所示:
这失败了,因为当我们尝试选择模板时它不存在,因为此时模板不在 DOM 中(对吗?)。
有什么办法可以做到这一点?我个人更喜欢这种在 JavaScript 中使用document.createElement
.
html - HTML5 模板标签不适用于边缘?
我制作了一个网站,它使用模板标签来实现一些 JavaScript 功能。而且这个功能在边缘不起作用,我认为这是因为模板标签,因为我过去听说它们之间可能存在一些问题。
但是根据 caniuse.com edge 应该支持模板标签,没有列出任何问题。同样根据 MDN:https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/template Edge 应该从版本 13 开始支持。我已经在版本 20 ov Edge 中进行了测试。
我也没有在边缘控制台中收到任何 javascript 错误,所以我认为它只能是模板标签的问题。
我的问题很简单。Edge 是否支持模板标签?还是需要解决(shiv 或类似的)?
javascript - Disqus 注释在聚合物自定义元素中不起作用
我不知道如何使 disqus 注释代码在我的自定义元素中工作。
我的网站结构:
| index.html
--------\ my-app.html
(自定义元素)
----------------\ my-testView1.html
(自定义元素)
---------------- \ my-testView2.html
(自定义元素)
我需要在里面放上disqusmy-testView1.html
评论my-testView2.html
结构index.html
:
结构my-app.html
:
结构my-testView1.html
:
结构my-testView2.html
:
disqus div
我把disqus评论的div放在里面<my-app>
,index.html
这样chrome就可以找到了。如果我把它放在里面,它就找不到<my-testView1>
它:
页my-app.html
因为 my-app.html 本身就是一个自定义元素,它不会让 chrome 找到它。所以我不得不把它放在shadow dom(index.html
页面)之外
my-testView1.html
页面上的 Javacript 代码my-testView2.html
如下所示:
结果
评论my-testView1.html
my-testView2.html
当时仅出现在其中之一上。我在 my-testView1.html 上需要 1 个 disqus 线程,在my-testView2.html上需要另一个 disqus 线程
也许是因为路由。Disqus 控制台消息说我需要使用 ajax 方法https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites不幸的是,当我更换 javascript 时我无法使其工作上面的代码与示例中的代码:
在两个自定义元素内(更改disqus_identifier
并disqus_url
相应地为每个元素)
javascript - appendChild() 从导入的模板中去除内容
<template>
我使用函数获得了 HTML5 的活动副本importNode()
:
在此之后,我填充动态数据,
最后,我将节点附加到目标容器中:
我的问题:result
节点的所有内容都被剥离了:我无法在结果节点中访问模板的组件元素。实际上,一旦执行了操作,该result
节点就根本不包含子节点。appendChild
我希望 的返回值appendChild
应该指向已插入容器中并且现在是活动文档的一部分的节点。任何解释为什么不是这种情况?
这是 jsfiddle(在 Chrome 53 中测试):
javascript - 如何在模板标签中查找需要在单个解决方案中支持所有浏览器的元素
如果我在模板标签中使用 div 元素意味着我将如何通过 jQuery 选择器找到。**
我只知道里面的 div 元素“id”
** 请检查以下示例..