Question

I have the following code:

...
</tr>
<!-- ko if: eLocBound() == 'true' -->
<tr>
    <td>Select Locations <span class="required_star">*</span></td>
    <td><input type="text" /></td>
</tr>
<!-- /ko -->
<tr>
...

This displays correctly in Chrome/Firefox/Safari. However, when I load the page in IE 9, the following error occurs:

Cannot find closing comment tag to match: ko if: eLocBound() == 'true'

When I check the HTML output in IE’s developer window, I discover that IE is actually nesting the <!-- ko if --> comment tag inside the previous TR tag instead of in between the TR tags, thus Knockout is unable to find the matching <!-- /ko --> tag. I’ve linked to a screenshot of the problem here: https://i.stack.imgur.com/2wDPU.jpg

Conversely, if I change the code to this:

<tr data-bind="visible: eLocBound() == 'true'">
    <td>Select Locations <span class="required_star">*</span></td>
    <td><input type="text" /></td>
</tr>

Then everything works fine. I would just like to know if anyone has encountered this problem with virtual elements.

Answer 1

This is an issue with Internet Explorer that Knockout can’t really compensate for. In your case, a good workaround is to use a tbody tag around your row. A table can include multiple tbody tags. So, your code would look like:

 ...
</tr>
<tbody data-bind="if: eLocBound() == 'true'">
<tr>
    <td>Select Locations <span class="required_star">*</span></td>
    <td><input type="text" /></td>
</tr>
</tbody>
<tr>
...