英文:
Mustache curly braces being moved out of table element within <template> HTML
问题
HTML5的template元素似乎会在HTML输出中破坏Mustache的花括号，特别是在table内部：
<template id="test">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</template>
<script>
const html = document.getElementById("test").innerHTML;
</script>
内部HTML显示如下：
{{#foo}}{{/foo}}<table><tr><td>{{.}}</td></tr></table>
然而，如果我们使用script元素而不是template元素，HTML就不会被破坏：
<script id="test" type="text/html">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</script>
内部HTML是正确的，可以被Mustache使用：
<table>{{#foo}}<tr><td>{{.}}</td></tr>{{/foo}}</table>
为什么会发生这种情况呢？是否有办法禁用这种行为？否则，显然，将其与Mustache等模板系统一起使用可能不是一个好主意。
英文:
The HTML5 template element seems to mangle Mustache curly braces in the HTML output, particularly within a table:
<template id="test">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</template>
<script>
const html = document.getElementById("test").innerHTML;
</script>
The inner HTML shows this:
{{#foo}}{{/foo}}<table><tr><td>{{.}}</td></tr></table>
However, if instead of a template we use a script element, the HTML is not mangled:
<script id="test" type="text/html">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</script>
The inner HTML is correct, and can be used by Mustache:
<table>{{#foo}}<tr><td>{{.}}</td></tr>{{/foo}}</table>
Why is it that this happens with template? Is there a way to somehow disable this behavior? Otherwise, apparently, it's not a good idea to use it with a template system like Mustache?
答案1
得分: 3
<template> 是专门用于 Web 组件 的，它具有自己的模板机制，已经集成在 Web 标准中。<template> 元素内的 HTML 应被视为“活动的”，必须是格式良好的，因此你不能仅仅在 <table>...</table> 内插入任意文本，而不将其包装在 <td>...</td> 中。
虽然 <script type="not-javascript"> 可能感觉有点老式和临时性，但它仍然是在 HTML 文档中嵌入任意模板代码的唯一正确方式。
或者，你可以将模板保存在单独的文件中，并使用捆绑工具和适当的插件将其导入到你的 JavaScript 模块中。例如，如果你使用 Rollup 捆绑你的 JavaScript 代码，并使用 Wontache 渲染 Mustache 模板，你可以使用 rollup-plugin-wontache 并按照以下方式组织你的代码：
template.mustache
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
script.js
import template from './template.mustache';
var htmlCode = template({foo: ['item 1', 'item 2']});
还有类似的插件适用于其他捆绑工具和 Mustache 渲染引擎的组合。
英文:
<template> is specifically meant for use with Web Components, which has its own templating mechanism that is integrated in the web standards. The HTML inside a <template> element should be considered "live" and must be well-formed, so you cannot just insert arbitrary text inside <table>...</table> without also wrapping it in <td>...</td>.
While a <script type="not-javascript"> may feel old-fashioned and perhaps a bit makeshift, it is still the only correct way to embed arbitrary template code in an HTML document.
Alternatively, you can save your template in a separate file and import it in your JavaScript modules with the help of a bundling tool and a suitable plugin. For example, if you were to bundle your JavaScript code using Rollup and use Wontache to render your Mustache templates, you could use rollup-plugin-wontache and structure your code as follows:
template.mustache
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
script.js
import template from './template.mustache';
var htmlCode = template({foo: ['item 1', 'item 2']});
There are similar plugins for other combinations of bundling tools and Mustache rendering engines.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论