IE浏览器中TR标签之间的Knockout Virtual Elements答案

【问题标题】：Knockout Virtual Elements between TR tags in IE browsersIE浏览器中TR标签之间的Knockout Virtual Elements
【发布时间】：2012-09-27 03:29:41
【问题描述】：

我有以下代码：

...
</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 实际上是嵌套了  注释标签 inside 前一个 TR 标签，而不是在 TR 标签之间，因此 Knockout 是找不到匹配的 标签。我已在此处链接到问题的屏幕截图：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>

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

这是 Knockout 无法真正弥补的 Internet Explorer 问题。在您的情况下，一个好的解决方法是在您的行周围使用 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>
...

【讨论】：

我是这么认为的...感谢您确认我必须注意 IE 的这种情况。我实际上选择了虚拟元素，因为 TR 标签已经包装在一个 TBODY 标签中，该标签附加了一个单独的可见性逻辑。只会在未来的情况下使用它。