IE浏览器中TR标签之间的Knockout Virtual Elements [英] Knockout Virtual Elements between TR tags in IE browsers

问题描述

我有以下代码:

...
</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 中加载页面时，出现以下错误:

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

找不到匹配的结束注释标签:ko if: eLocBound() == 'true'

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

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: http://imgur.com/nN7Ln

相反，如果我把代码改成这样:

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.

推荐答案

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

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

这篇关于IE浏览器中TR标签之间的Knockout Virtual Elements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！