HTML模板JavaScript填充 [英] HTML Templates JavaScript polyfills
问题描述
我正在寻找最符合标准且面向未来的前端HTML模板方法。
存在一个相对较新的 W3C HTML模板草案规范，例如：
< template id =mytemplate>
< img src =alt =great image>
< div class =comment>< / div>
< / template>
有谁知道是否有好的 JavaScript polyfills 已经存在，可以用于 HTML5Rocks指南这些模板具有以下属性： 我认为不可能纯粹用JavaScript填充来实现所有这四个属性，所以任何解决方案只能是部分。 有一个 jsfiddle ，它演示了这种polyfill。 至于图书馆，我不知道他们支持它，但可以尝试像< Modernizr 和 Initializr I'm looking for the most standards-compliant / future-proof method for front-end HTML templating. There exists a relatively new W3C draft specification for HTML Templates, e.g.: Does anyone know if any good JavaScript polyfills already exist to make According the the HTML5Rocks guide these templates have the following properties: I think it is impossible to implement all four of these properties purely with a JavaScript polyfill, so any solution would only be partial. There is a jsfiddle that demonstrates such a polyfill. As for libraries, and I don't know that they support it yet, but try something like Modernizr and Initializr 这篇关于HTML模板JavaScript填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
困难
< body> ，或< frameset>
< script>
// Shim让我们可以在IE6 / 7/8
document.createElement（'template'）;
< / script>
< template id =example>
< h1>
这是模板内容。
< / h1>
< p>
这真的很棒。
< / p>
< / template>
< div id =target>
< p>
这是普通的旧内容。
< / p>
< / div>
/ * POLYFILL * /
（函数templatePolyfill（d）{
if（d.createElement（'template'）中的'content'）{
返回false ;
}
var qPlates = d.getElementsByTagName（'template'），
plateLen = qPlates.length，
elPlate，
qContent，
contentLen，
docContent;
for（var x = 0; x< plateLen; ++ x）{
elPlate = qPlates [x];
qContent = elPlate.childNodes;
contentLen = qContent.length;
docContent = d.createDocumentFragment（）;
while（qContent [0]）{
docContent.appendChild （qContent [0]）;
}
elPlate.content = docContent;
}
}）（document）;
/ *例子* /
var elExample = document.getElementById（'example'），
elTarget = document.getElementById（'target'）;
elTarget.appendChild（elExample.content.cloneNode（true））;
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
<template> element usable in a cross-browser way? Preferably complying with this standard.
Difficulties
<head>, <body>, or <frameset>"<script>
// Shim so we can style in IE6/7/8
document.createElement('template');
</script>
<template id="example">
<h1>
This is template content.
</h1>
<p>
It's really great.
</p>
</template>
<div id="target">
<p>
This is regular old content.
</p>
</div>
/* POLYFILL */
(function templatePolyfill(d) {
if('content' in d.createElement('template')) {
return false;
}
var qPlates = d.getElementsByTagName('template'),
plateLen = qPlates.length,
elPlate,
qContent,
contentLen,
docContent;
for(var x=0; x<plateLen; ++x) {
elPlate = qPlates[x];
qContent = elPlate.childNodes;
contentLen = qContent.length;
docContent = d.createDocumentFragment();
while(qContent[0]) {
docContent.appendChild(qContent[0]);
}
elPlate.content = docContent;
}
})(document);
/* EXAMPLE */
var elExample = document.getElementById('example'),
elTarget = document.getElementById('target');
elTarget.appendChild(elExample.content.cloneNode(true));
