我有一张使用车把模板的桌子。在表的第一行中声明了#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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我不确定您为什么要包装
#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;