1

我是 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 for JS Templating 和 Django 作为我的服务器端。而且我总是尝试将 HTML 和 JS 代码保存在单独的文件中。

4

1 回答 1

1

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

<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
于 2012-11-15T06:11:38.477 回答