Struktur hendal

Question

Saya mempunyai jadual menggunakan templat hendal. Pernyataan penutup #each，在下一行中声明了标记，在最后一行中完成了#each diisytiharkan dalam baris pertama jadual.

<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>

Selepas melaksanakan templat yang disusun, output yang dihasilkan adalah seperti yang ditunjukkan di bawah. Dalam jadual di mana setiap baris ditakrifkan, baris pertama dan terakhir tidak dipadamkan. Adakah terdapat cara untuk mengeluarkannya?

<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

Saya tidak pasti mengapa anda mahu membungkus panggilan #each seperti {{#setiap itemList}}. Ini akan menghasilkan HTML yang rosak sepenuhnya.

Anda mahu setiap item dalam itemList 中的每个项目都有一个行 ，因此您需要确保行标记 < code> 和 由 #each 包含，并且每个的外部的任何标记都是有效且封闭的 itemList mempunyai baris

, jadi anda perlu memastikan baris ditandakan < code> dan

terkandung oleh

, dan sebarang teg di luar setiap satunya adalah sah dan disertakan

:

🎜🎜 🎜

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>

🎜