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屋!