Knockout.js containerless "foreach" not working with <table>
This code throws the error (in Chrome): "Cannot find closing comment tag to match: ko foreach: MyPlans":
<table>
<!-- ko foreach: MyPlans -->
<tr>
<td>Test</td>
</tr>
<!-- /ko -->
</table>
If I use a list instead, everything works:
<ul>
<!-- ko foreach: MyPlans -->
<li>
Test
</li>
<!-- /ko -->
</ul>
I would like to use the containerless foreach with a table. Is there something I'm doing wrong? Is it a bug?
This is related to the fact that browsers insert tbody
tags automatically, which creates a mismatch in the comments. The rendered output will look like:
<table>
<!-- ko foreach: MyPlans -->
<tbody>
<tr>
<td>Test</td>
</tr>
<!-- /ko -->
</tbody>
</table>
Steve did put some work into trying to correct mismatched tags in KO, but the easiest thing for you to do is either add the tbody
yourself or add the tbody
and put your binding on it.
<table>
<tbody data-bind="foreach: MyPlans">
<tr>
<td>Test</td>
</tr>
</tbody>
</table>
It is legal for a table to have multiple tbody
tags, if necessary.