问题标签 [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 - 我怎样才能保存一个 for a second use?
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the same action can't be performed again. How do I ensure the template isn't emptied, or should I be using a different technique?
Example
HTML:
JavaScript:
Live demo: http://jsfiddle.net/Supuhstar/y33a9/
Subclassing SKNodes created with SpriteKit .sks scene file
(this is for XCode 6 and iOS 8 beta 4)
Love the new SceneKit editor. I'm successfully loading the scene from .sks file into a custom SKScene class. However, objects inside it are instantiated as default classes (SKNode, SKSpriteNode, etc), and i'm not sure how to bind them to be instantiated as custom subclasses instead.
Currently, I'm getting around that by creating custom classes and linking to sprite nodes as a property, and that works ok
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the same action can't be performed again. How do I ensure the template isn't emptied, or should I be using a different technique?
Example
HTML:
JavaScript:
Live demo: http://jsfiddle.net/Supuhstar/y33a9/
Subclassing SKNodes created with SpriteKit .sks scene file
(this is for XCode 6 and iOS 8 beta 4)
Love the new SceneKit editor. I'm successfully loading the scene from .sks file into a custom SKScene class. However, objects inside it are instantiated as default classes (SKNode, SKSpriteNode, etc), and i'm not sure how to bind them to be instantiated as custom subclasses instead.
Currently, I'm getting around that by creating custom classes and linking to sprite nodes as a property, and that works ok
javascript - ShadowDOM：我如何重复内容？
所以我知道，使用 Polymer，您可以使用“repeat”属性重复 ShadowDOM 树中的内容。但是如何在本机 ShadowDOM 规范中做到这一点？那可能吗？
在这个例子中：http ://css-tricks.com/modular-future-web-components/作者使用了 nth-of-type 函数。但是，当您知道实际 DOM 中的元素将被重复多少次（在本例中为 4 次）时，它就会起作用。我想要实现的是能够处理无限次数的重复。
javascript - IE 11 的模板标签 polyfill - 不适用于表 tr 和 td
我使用 polyfill js，它允许为不支持它的浏览器处理标签。
来源问题
但我注意到，在 IE 11 中，这个 polyfill 无法使用包含<tr>和<td>标签的模板
问题是当我们尝试从模板标签节点获取 childNodes
它返回除了<tr>和<td>孩子之外的所有内容，就好像里面没有这样的标签一样<template>。
我错过了什么吗？这个问题有什么解决方法吗？
PS 由于缺乏声誉，我无法对源问题添加评论。对此感到抱歉。
jquery - jquery and HTML5's template tag
I want to use underscorejs' templating function. It seems like HTML5's <template> tag would be an AMAZING fit for this, but there's a snag... The underscorejs interpolation tags (<% and %> get html-escaped, so HTML inside a template tag looks like so:
=>
Well, that sucks.
Now, as it turns out, if I use a script tag with a fictitious type, like "x-underscore-templates", then it looks hunky-dory:
=>
So my question is -- can I use the template tag? How do I get just the characters I need, in a string, so I can pass them to underscore's templating system?
Note - since the server I'm using right now is a hapijs / node server that uses handlebars as a server-side templating system, I can't just use {{ and }}.
javascript - 使用 html: innerHTML.replace
The most popular intro says that I can easily clone html templates within my document.
&l
The most popular intro says that I can easily clone html templates within my document.
The word "template" however implies that you won't copy-paste it as is, unmodified. Template means that you want to update some variables with specific values. It recommends the following approach for updating the node:
Isn't it perfect? There is querySelector to get the element so that you can update its attributes. I just do not understand why does he updates the template before cloning it. But that is not my question. The real question is that, in mine case, the location of variable to update is unknown. It can be either attribute or innerText in whatever template structure is. This is the most general and frequent use of template, I believe. So, I can ensure that the variable id is unique within the template, like #reply here
ought to update the #reply, but author does not explain how to do that. I succeeded to use innerHTML on the original template, document.querySelector('#mytemplate').innerHTML.replace(id, value) but this breaks the template for later use, as explained above. I failed to update the cloned text. This is probably because template.clone produces a document fragment, which has no innerHTML. But, before pushing that forth, I decided to investigate for alternatives since I know that innerHTML/outerHTML is not quite standard.
Alternative for innerHTML? inspects the alternatives to innerHTML but again, they assume too much about the template. Instead of just replacing some specific identifiers with user values, they completely recreate the template, which defeats the whole notion of template. Template looses any sense once you recreate its whole code in the variable valuation. So, how is <template> is supposed to use?
As of this writing the data browser is terrible for the more advanced columns, so the answer to your question is no. Hopefully they're working on a more robust version. Keep an eye on http://blog.parse.com/ and cross your fingers.
The most popular intro says that I can easily clone html templates within my document.
&l
The most popular intro says that I can easily clone html templates within my document.
The word "template" however implies that you won't copy-paste it as is, unmodified. Template means that you want to update some variables with specific values. It recommends the following approach for updating the node:
Isn't it perfect? There is querySelector to get the element so that you can update its attributes. I just do not understand why does he updates the template before cloning it. But that is not my question. The real question is that, in mine case, the location of variable to update is unknown. It can be either attribute or innerText in whatever template structure is. This is the most general and frequent use of template, I believe. So, I can ensure that the variable id is unique within the template, like #reply here
ought to update the #reply, but author does not explain how to do that. I succeeded to use innerHTML on the original template, document.querySelector('#mytemplate').innerHTML.replace(id, value) but this breaks the template for later use, as explained above. I failed to update the cloned text. This is probably because template.clone produces a document fragment, which has no innerHTML. But, before pushing that forth, I decided to investigate for alternatives since I know that innerHTML/outerHTML is not quite standard.
Alternative for innerHTML? inspects the alternatives to innerHTML but again, they assume too much about the template. Instead of just replacing some specific identifiers with user values, they completely recreate the template, which defeats the whole notion of template. Template looses any sense once you recreate its whole code in the variable valuation. So, how is <template> is supposed to use?
As of this writing the data browser is terrible for the more advanced columns, so the answer to your question is no. Hopefully they're working on a more robust version. Keep an eye on http://blog.parse.com/ and cross your fingers.
javascript - initialization event with polymer.js
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascr
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascript however that the <template> has actually been initialized. I have tried listening for every possible event I could think of and browsed the source code as well for a bit, but can't seem to find any pointers anywhere although I assume this must be possible.
If what I mean is hard to comprehend a simple jsfiddle showing the issue can be found here, though I think the description above should suffice.
You want to listen for the template-bound event. It's mentioned at the bottom of this section.
I shot a screencast on auto-binding templates which covers this a bit more.
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascr
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascript however that the <template> has actually been initialized. I have tried listening for every possible event I could think of and browsed the source code as well for a bit, but can't seem to find any pointers anywhere although I assume this must be possible.
If what I mean is hard to comprehend a simple jsfiddle showing the issue can be found here, though I think the description above should suffice.
You want to listen for the template-bound event. It's mentioned at the bottom of this section.
I shot a screencast on auto-binding templates which covers this a bit more.
javascript - 在带有 CONTENT 标记的自定义元素中使用 SELECT 标记时出现问题
我希望能够将option元素拉入 Shadow DOM 中的插入点，但由于 DOMselect是空的，我认为不会发生这种情况。无论如何，Chrome 检查器对插入点并不是很有帮助，但我已经验证了我的浏览器在执行其他插入点操作时可以正常工作，例如除了将option元素插入到select.
我定义了一个自定义元素，如下所示：
这是#guy模板：
这是用法：
同样，我希望将这些option元素插入到selectShadow DOM 中，但是当我打开下拉列表时它们不会出现。
我认为也许“派生”HTMLElement是问题所在，但如果我实现它也行不通HTMLSelectElement。
我还尝试过不使用模板并直接修改shadow' innerHTML，但这也不起作用。
我目前的想法是元素在s、s 或soption之外无效，并且浏览器正在抛出某种适合但没有告诉我的情况。selectdatalistoptgroup
我很茫然，可能会通过创建第二个item元素占位符来解决这个问题，该占位符将转换为option我的createdCallback. 啊。
javascript - 和有什么区别和标记聚合物？
在阅读纸张标签组件时，我知道有一个标签<shadow></shadow>我用我的一个组件对其进行了测试。它的工作方式与<content></content>标签类似。所以我的问题是它们之间有什么区别？
javascript - html模板标签中的id属性
因此，我正在深入研究 HTML5 模板标签，作为未来可能解决我的 Web 应用程序问题的方法。我似乎找不到的一件事是：您可以在模板标签中使用 id 属性吗？
模板可以重复使用，但 id 不能。因此，从理论上讲，多次使用相同的模板（这就是最初发明它们的原因）会导致无效的 HTML。有官方答案吗？
javascript - 模板标签不包含内容
我在模板中包含了一些 html，但是当我尝试激活模板并更改模板中的某些元素时，它返回为 null。我在模板上做了一个console.log，回来的只是模板标签的开始和结束标签，例如<template id="panel-template"></template>这是渲染的版本，你可以看到没有一个应该被封装的html不是当下。
这是我的模板
这是与模板相关的javascript的一部分，我当然已经将它包装在document.ready中
这是 loadWidgets 函数。
}
我收到一个错误，说 panelTitle 为空，但我认为这是因为在激活模板时，它似乎没有通过封装的 html 元素。我不确定如何进行。