Structure du guidon

Question

J'ai une table utilisant un modèle de guidon. La déclaration finale #each，在下一行中声明了标记，在最后一行中完成了#each est déclarée dans la première ligne du tableau.

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

Après avoir exécuté le modèle compilé, le résultat généré est le suivant. Dans le tableau où chaque ligne est définie, la première et la dernière ligne ne sont pas supprimées. Y a-t-il un moyen de le supprimer ?

<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

Je ne sais pas pourquoi vous souhaitez terminer l'appel #each comme {{#each itemList}}. Cela produira du HTML complètement cassé.

Vous voulez que chaque élément de itemList 中的每个项目都有一个行 ，因此您需要确保行标记 和 由 #each 包含，并且每个的外部的任何标记都是有效且封闭的 itemList ait une ligne , vous devez donc vous assurer que les lignes sont marquées code> et

sont contenus par

, et toute balise extérieure de chacun est valide et entoure

 : 🎜🎜 🎜

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>

🎜