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

Answer 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

JavaScript模板化：如何组织部分模板代码？

1 个答案: