在IE浏览器中的TR标签之间剔除虚拟元素 [英] 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:

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

当我在IE开发人员窗口中检查HTML输出时，我发现IE实际上是将<!-- ko if -->注释标签嵌套在 之前的TR标签中，而不是嵌套在这些TR标签之间，因此淘汰赛就是找不到匹配的<!-- /ko -->标签.我已链接到此问题的屏幕截图: 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.

推荐答案

这是Internet Explorer的一个问题，Knockout无法真正弥补.在您的情况下，一个好的解决方法是在您的行周围使用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标签之间剔除虚拟元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！