Question

我使用Meteor，但想使用一些使用html模板元素的vanilla javascript / HTML代码。

当我尝试在流星模板中包含一个时：

<template name="test2">
    <template id="test3">Some stuff i will clone in javascript</template>
</template>

Meteor显示以下错误：

While processing files with templating (for target web.browser):
client/index.html:153: Expected one of: <body>, <head>, <template>

有没有办法将这些包含在Meteor模板中？我知道我可以将它们包含在body标签内，但它有点笨拙。

Answer 1

afaict这不能在Meteor中完成，因为Meteor使用模板标签正是因为它的设计原因，来自你的链接：

HTML模板元素是一种保持机制加载页面时不呈现的客户端内容但随后可以在运行时使用JavaScript实例化。

你永远不应该在DOM中看到<template>标签，这将阻止你以后在DOM中操作它。

听起来你可能正在尝试做一些Blaze本身承担责任的事情。也许你可以告诉我们你想用你的模板做什么，我们可以告诉你如何在Meteor中做到这一点。

Answer 2

使用助手

在客户端.js文件

Template.registerHelper('vanillaTemplate', () => {
    return '<template id="test3">Some stuff i will clone in javascript</template>'
})

在客户端.html文件

<template name="test2">
    {{> vanillaTemplate}}
</template>

Answer 3

仅出于提供替代解决方案的目的，根据您的第三方库作为HTML模板的需要，您还可以使用<script type="text/x-template">代替新的<template>：

<template name="test2">
    <script type="text/x-template" id="test3">
        Some stuff i will clone in javascript
    </script>
</template>

例如，在<template>被浏览器广泛支持之前，the typical solution for Vue。

优点是，您可以在HTML中保留布局声明，并且可以完全自由地调整其内容，而不必为每个变体注册一个助手。

大多数IDE本身还支持在此类代码块中突出显示代码语法，而很少有针对字符串HTML的代码语法。