如何在 HTML 页面中正确存储 HTML 模板？答案

【问题标题】：How can I correctly store a HTML template within a HTML page?如何在 HTML 页面中正确存储 HTML 模板？
【发布时间】：2012-11-16 05:57:41
【问题描述】：

我有一些小的模板字符串，它们将通过 Mustache.js 在同一页面上呈现。我不需要为模板创建单独的 html 文件。

用于存储模板的选项：

存储在 javascript 变量中：Hackish 多行字符串，大量转义引号。
存储为隐藏 div 的 innerHTML。

我尝试了方法#2，但它似乎无法正常工作。

小提琴： http://jsfiddle.net/RHwnq/2/

<html>
<head></head>
<body>
<div id='templates' class='hide' align="">
         <div id='tableTemplate'>
            <table class="table">
                 {{#name_list}}
                  <tr><td> {{name}} </td></tr>
                {{/name_list}}
            </table>
         </div>
</div>

<script>
 var template = $('#tableTemplate').html();
 console.log(template);
</script>

</body>
</html>

这个日志：

{{#name_list}}
  {{name}} 
{{/name_list}}
<table class="table"><tbody><tr><td></td></tr></tbody></table>

而不是：

  <table class="table">
                     {{#name_list}}
                      <tr><td> {{name}} </td></tr>
                    {{/name_list}}
  </table>

这可能是由于浏览器的一些标记更正所致。在 HTML 页面中存储 HTML 模板还有哪些其他好的技巧？

【问题讨论】：

不将它们存储在同一个文件中，而是通过 AJAX 加载它们怎么样？
@feeela 不，我不想进行 ajax 调用来加载 2-3 个小字符串，我打算将它们存储在同一页面中。
在一些与backbone.js/underscore.js 相关的教程中，他们将模板存储在标签中。仔细看看这个问题：stackoverflow.com/questions/4912586/…

标签： javascript mustache

【解决方案1】：

我将它们存储在脚本标签中，因此它们不会被渲染，如下所示：

<script id="abc-template" type="text/html">
    <h1>{{name}}</h1>
</script>

然后您可以像这样引用它们：

var template = $('#abc-template').html();
var html = Mustache.to_html(template, data);
$('#abc-div').html(html);

【讨论】：

哈，同样的解决方案只需几秒钟 :)
FML 救了我一整天。

【解决方案2】：

使用<script> 标签非常适合：

<script id="tableTemplate" type="text/html">
  <table class="table">
    {{#name_list}}
    <tr><td> {{name}} </td></tr>
    {{/name_list}}
  </table>
</script>

它实际上是一个插入式替代品，它将与您的 var template = $('#tableTemplate').html(); 一起使用

【讨论】：

【解决方案3】：

根据您的 IDE，您可能会或可能不会在 <script></script> 块中获得 HTML 语法突出显示。我像你一样使用div 块，但添加

#templates {display: none;}

到 CSS。

【讨论】：

【解决方案4】：

我会使用 HTML“模板”标签。

<template id="tmp">Some HTML here</template>

看这个例子：

https://jsfiddle.net/cityremade/xwLht8vc/

【讨论】：