车把桌结构

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

电话，就像

<td colspan="4">{{#each itemList}}</td>

一样。这将产生完全损坏的 HTML。

您希望 <tr> 中的每个项目都有一个

row

itemList

，因此您要确保行标签

<tr>

和

</tr>

包含在

#each

中，并且任何标记 外每个的是有效且封闭的

<tr>

：

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>