JavaScript 模板：部分模板代码应该如何组织？答案

【问题标题】：JavaScript Templating: How should the partial template code be organized?JavaScript 模板：部分模板代码应该如何组织？
【发布时间】：2012-11-14 10:25:09
【问题描述】：

我是 JavaScript 模板世界的新手。

这里有一个页面，不知道模板代码应该如何组织。

这是第一次加载页面时的相关 HTML：

...
<table id="color-codes">
  <tr>
    <td>red</td>
    <td>#FF0000</td>
  </tr>
  <tr>
    <td>blue</td>
    <td>#0000FF</td>
  </tr>
  <tr>
    <td>black</td>
    <td>#000000</td>
  </tr>
</table>
...

用户可以为表格添加颜色。每次添加颜色时，浏览器都会向服务器发送一个 AJAX 请求。然后服务器返回一个包含颜色名称和颜色代码的 JSON 对象。

客户端收到 JSON 对象后，用 JSON 对象渲染模板（如下），然后将生成的 DOM 对象插入到表的末尾。

表格行模板：

<tr id='tp-color-entry'>
  <td class='color-name'></td>
  <td class='color-code'></td>
</tr>

问题：我应该把这个模板代码放在哪里？在 HTML 文件中？还是JS文件？如果在 HTML 文件中，如何防止它干扰页面呈现/布局？如果在 JS 文件中，我是否只需将其保存分配给一个变量？

请注意，我使用 Pure 作为 JS 模板和 Django 作为我的服务器端。而且我总是尝试将 HTML 和 JS 代码保存在单独的文件中。

【问题讨论】：

标签： javascript templates javascript-framework template-engine

【解决方案1】：

您可以将其放在带有无法识别的type 属性的script 标记中：

<script type="text/x-pure-template" id="color-entry-template">
    <tr id='tp-color-entry'>
        <td class='color-name'></td>
        <td class='color-code'></td>
    </tr>
</script>

那么取回模板就很简单了：

document.getElementById('color-entry-template').textContent

【讨论】：

啊~这就解释了为什么我看到有些人把他们的模板代码放在带有text/html类型的脚本标签中（浏览器不知道如何执行文本/html脚本）。谢谢你，伙计。