使用Javascript组件打包标记以用作模板

时间:2014-12-08 03:02:48

标签: javascript templates

我有一个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中。

0 个答案:

没有答案