我有一个HTML文档template.html
,看起来像是:
<div id="Foo">
<span class="Bar"></span>
...
</div>
我用它作为模板在Javascript中为组件构建一些DOM。
首先,我只是通过复制粘贴标记并将其包装在example.html
标记内,将其添加到我的页面<template>
。然后在我的Javascript中,我构建了一个克隆,通过执行以下操作将其添加到页面中:
var myTemplate = Document.getElementById('#myTemplateId').cloneNode(true);
Document.getElementById('#newParent').appendChild(myTemplate, true);
虽然这有效,但我显然不想复制和粘贴我的模板以便能够使用我的组件。
我想做的是以某种方式将我的模板标记打包到我的Javascript中。我仍然希望保持我的Javascript和Markup分开用于开发和理智,但是在构建时(我使用GruntJS作为我的任务运行器)我想要以某种方式将它们组合在一起以便它们可以打包在一起,简单链接到文件。我的意思是我想要一些方法来使用我的Javascript打包模板,如Javascript。那就是说,我想我的更广泛的问题是:
如何将Markup保存/打包成Javascript文件或对象(JSON),以便它可以用作模板以便稍后在Javascript中生成DOM?
我最接近找到一个可能的解决方案是将标记文档template.html
转换为字符串,将其保存到变量,然后通过.innerHTML
将其添加到临时元素,然后将其转换为DocumentFragment。虽然这可行,但必须有更好的方法,将标记转换为字符串感觉不对。
更新
通过我的研究,我知道行业的趋势正在转向HTML imports。但是,它是not widely supported yet,所以在此期间,我仍然希望能够将我的模板打包到我的js中。