JavaScript 模板 : How should the partial template code be organized?

Question

我是 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 代码保存到单独的文件中。

Answer 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