Welcome 微信登录

首页 / 脚本样式 / JavaScript / knockout 虚拟标签(virtual element) 在 table 中的问题

knockout 虚拟标签(virtual element) 在 table 中的问题2015-06-05这几天看了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 中,没有找到虚拟标签的闭合,不过表面上看来,它确实是有一个对应的闭合.

这是为什么?