这几天看了MVC4 / 5 的一些东西, 基本上和 MVC 3都一样, 看起来毫不费力气, 项目还没有正式开工, 每天都是看文档,了解技术. 闲着无聊就把
knockout js 给看了一遍. 今天在看 SignalR的时候, 随手写了段测试代码,发现 Knockout 的虚拟标签有点问题,
一开始我是这样写的:
<table>
<tr data-bind="foreach:msgs">
<td data-bind="text:name"></td>
<td data-bind="text:msg"></td>
</tr>
</table>
发现循环是发生在 tr 内部的 td 上的, 即生成的是列, 而不是行.
换成:
<table>
<!-- ko foreach: msgs -->
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:msg"></td>
</tr>
<!-- /ko -->
</table>
居然提示:
Cannot find closing comment tag to match: ko foreach: msgs
仔细看了一遍HTML, 没有发现没有闭合的标签,语法也没有错. td 里加内容也无济于事.
定位到 knockout-3.1.0.debug.js 的 getVirtualChildren 方法上, 传入的参数是一个 Comment
,即那个虚拟标签.
在看一下它的父对像是谁:
下面紧接着有一个 while 循环:
while (currentNode = currentNode.nextSibling) {
目的是去循环的判断和这个 Comment 在同一级上的 Element 是不是一个 Comment , 也就是在同一级中找到这个虚拟标签的关闭标签,,
很不幸, 在上面那段HTML 中,没有找到虚拟标签的闭合,不过表面上看来,它确实是有一个对应的闭合.
这是为什么?
在IE下,进入上面那个循环,第一个是一个换行, TextNode,, 第二个是什么? TR ? 猜错了,是 TBODY !为什么是TBODY ?
因为 TR 如果不显式的声明在 TBODY内的话, 浏览器会自动生成一个 TBODY
为环绕 TR.
如果你学JS一开始就是从JQUERY开始的话, 你基本上是不会知道这个事的.
在看一下这个 TBODY 的内容:
最后那句本来是当作虚拟标签的闭合的, 理想下应该是和虚拟标签是同一级的, 但是现实中,它却是 Tbody 的下级, 面虚拟标签是和 TBODY同级的,
所以就报了这么一个错误.
那就改一下吧:
<table>
<tbody>
<!-- ko foreach: msgs -->
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:msg"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
但是这样写又多止一举了,不如直接绑定到 tbody 上算球了!