车把台结构

Question

我有一张使用车把模板的桌子。在表的第一行中声明了#each，在下一行中声明了标记，在最后一行中完成了#each 结束声明。

<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col><col><col><col></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">{{#each itemList}}</td>
</tr>
<tr>
<td>{{name}}</td>
<td>{{price}}</td>
<td>{{qty}}</td>
<td>{{total}}</td>
</tr>
<tr>
<td colspan="4">{{/each}}</td>
</tr>
</tbody>
</table>

执行编译后的模板后，生成的输出如下所示。在定义每个行的表中，第一行和最后一行不会被删除。有什么办法可以去掉吗？

<table style="border-collapse: collapse; width: 100%;" border="1" data-mce-style="border-collapse: collapse; width: 100%;">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>a</th>
      <th>c</th>
      <th>v</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">
        <tr>
          <td>12</td>
          <td>3</td>
          <td>2</td>
          <td>2</td>
        </tr>
         <tr>
            <td colspan="4"></td>
         </tr>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我不确定您为什么要包装 #each 调用，如 {{#each itemList}}。这将产生完全损坏的 HTML。

您希望 itemList 中的每个项目都有一个行 ，因此您需要确保行标记 和 由 #each 包含，并且每个的外部的任何标记都是有效且封闭的 :

const template = Handlebars.compile(`
<table style="border-collapse: collapse; width: 100%;" border="1">      <colgroup><col><col><col><col></colgroup>
   <thead>
     <tr>
       <th>Name</th>
       <th>Price</th>
       <th>Quantity</th>
       <th>Total</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td colspan="4"></td>
     </tr>
     {{#each itemList}}
       <tr>
         <td>{{name}}</td>
         <td>{{price}}</td>
         <td>{{qty}}</td>
         <td>{{total}}</td>
       </tr>
     {{/each}}
     <tr>
       <td colspan="4"></td>
     </tr>
  </tbody>
</table>
`);

const data = {
  itemList: [
    {
      name: 'One',
      price: 1,
      qty: 1,
      total: 1
    },
    {
      name: 'Two',
      price: 2,
      qty: 2,
      total: 4
    }
  ]
};

const output = template(data);

document.body.innerHTML = output;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>