車把台結構

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>