HTML模板的JavaScript polyfills(HTML Templates JavaScr

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

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

<template id="mytemplate">
    <img src="" alt="great image">
    <div class="comment"></div>
</template>

有谁知道是否有良好的JavaScript的polyfills已经存在，使<template>元素的跨浏览器的方式使用吗？与此标准遵守优选。

难点

根据该对的HTML5Rocks引导这些模板具有以下特性：

“它的内容实际上是惰性的，直到激活”
“脚本不运行，在没有加载图像，音频不玩了，”
“内容被认为不是在文件中”
“模板可放置在任何地方的内部<head> <body>或<frameset>

我认为这是不可能实现这些性能与纯粹一个JavaScript填充工具的所有四个，因此任何解决办法只能是局部的。

Answer 1:

有一个的jsfiddle演示这样的填充工具。

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

至于图书馆，我不知道他们支持它，但你可以试试Modernizr的和Initializr

Answer 2:

Xotic750提供的是通过突变HTML元素的作品了坚实的填充工具 - 但如果任何新的模板后添加到DOM它会失败，和变异越来越气馁（其中可以避免的）。

相反，我建议在您使用模板的点介绍“填充工具”的行为。添加这个功能到你的JS：

function templateContent(template) {
    if("content" in document.createElement("template")) {
        return document.importNode(template.content, true);
    } else {
        var fragment = document.createDocumentFragment();
        var children = template.childNodes;
        for (i = 0; i < children.length; i++) {
            fragment.appendChild(children[i].cloneNode(true));
        }
        return fragment;
    }
}

用你的模板元素的引用调用函数。它会提取内容，并返回一个DocumentFragment的，然后可以连接到另一个元素（或者其他任何你可能想与模板的内容做）。像这样：

var template = document.querySelector("template#my-template");
var content = templateContent(template);
someElm.appendChild(content);

现在，对方的回答没有提到它，但你可能需要一些CSS隐藏<template>元素。

template { display: none; }

这里有一个CodePen将所有这些在一起。

现在，这将在本机支持的浏览器正常工作<template>元素，并在那些没有。类似于其他的答案，它不是一个完美的填充工具，因为它不会使模板惰性（即会很复杂，速度慢，且容易出错）。但它的作品不够好，我在生产中使用。

发表评论，如果您有疑问或问题，我会相应修改。

Answer 3:

另一种可能性是Web组件polyfills ，其包括用于将一个填充工具<template>标记。请记住，webcomponents.js包括的不仅仅是更多的polyfills <template>标签虽然。

Answer 4:

另一种可能性是Neovov的模板元件型填充工具。

这是一个专门的<template> ，你可以在Github上找到填充工具。

文章来源: HTML Templates JavaScript polyfills