javascript - IE 浏览器中 TR 标签之间的 Knockout 虚拟元素

Question

我有以下代码:

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

这在 Chrome/Firefox/Safari 中正确显示。但是，当我在 IE 9 中加载页面时，出现以下错误:

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

当我在 IE 的开发者窗口中检查 HTML 输出时，我发现 IE 实际上嵌套了 <!-- ko if -->注释标签在之前的 TR 标签中，而不是在 TR 标签之间，因此 Knockout 无法找到匹配的 <!-- /ko -->标签。我已在此处链接到问题的屏幕截图:http://imgur.com/nN7Ln

相反，如果我将代码更改为:

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

然后一切正常。我只想知道是否有人遇到过虚拟元素的这个问题。

Answer 1

这是 Internet Explorer 的一个问题，Knockout 无法真正弥补。在您的情况下，一个好的解决方法是在您的行周围使用 tbody 标记。一个表可以包含多个 tbody 标签。因此，您的代码如下所示:

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