knockout 虚拟标签(virtual element) 在 table 中的问题

这几天看了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 上算球了!

时间: 2024-10-09 09:04:50

knockout 虚拟标签(virtual element) 在 table 中的问题的相关文章

Oracle 11g 虚拟列 Virtual Column介绍

Oracle 11G 虚拟列 Virtual Column Oracle 11G 在表中引入了虚拟列,虚拟列是一个表达式,在运行时计算,不存储在数据库中,不能更新虚拟列的值. 定义一个虚拟列的语法: column_name [datatype] [GENERATED ALWAYS] AS [expression] [VIRTUAL] 1.虚拟列可以用在select,update,delete语句的where条件中,但是不能用于DML语句 2.可以基于虚拟列来做分区 3. 可以在虚拟列上建索引,o

ORACLE虚拟索引(Virtual Index)

ORACLE虚拟索引(Virtual Index)   虚拟索引概念 虚拟索引(Virtual Indexes)是一个定义在数据字典中的假索引(fake index),它没有相关的索引段.虚拟索引的目的是模拟索引的存在而不用真实的创建一个完整索引.这允许开发者创建虚拟索引来查看相关执行计划而不用等到真实创建完索引才能查看索引对执行计划的影响,并且不会增加存储空间的使用.如果我们观察到优化器生成了一个昂贵的执行计划并且SQL调整指导建议我们对某些的某列创建索引,但在生产数据库环境中创建索引与测试并

虚拟方法virtual的用法

unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,  Dialogs, StdCtrls; type  TForm1 = class(TForm)    Button1: TButton;    Button2: TButton;    Button3: TButton;    procedure Button1Click(Sender: TO

js导出table中的EXCEL总结

导出EXCEL一般是用PHP做,但是项目中,有时候PHP后端工程师返回的数据不是我们想要的,作为前端开发工程师,把对应的数据编号转换为文字后,展示给用户,但是,需求要把数据同时导出一份EXCEl.无奈之下,我只能用js导出table中的数据了. 导出EXCEl一般是自己人用的,所以用js导出,因为js导出EXCEL一般情况下兼容性不是很好,很多只是兼容IE浏览器,还要设置在工具栏中进行设置才能导出,因为会相对比较烦.下面介绍几种方法: 一.js导出EXCEl带单元格合并[已验证,比较好用] //

点击table中的某一个td,获得这个tr的所有数据

功能: 点击table中的某一个td,获得这个tr的所有数据 效果图 <html> <head> <script> function getData2(element){ document.getElementById("name").value=element.children[0].innerHTML; document.getElementById("xuehao").value=element.children[1].in

jQuery_review之table中根据行选中,进行背景变色和radio选中

在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中.并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式.趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤. 在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML使用如下的代码<input type="radio" name="fruit">这

jQuery_review之table中根据行选中,进行背景变色和checkbox选中

继续复习jQuery,对table来说,上面除了单选之外,还有多选的一个控制.对于多选来说,需要对多选的内容进行高亮显示,还应该在页面加载的时候,对已经默认选中的内容进行高亮.这些小功能也是复习jQuery选择器的一个很好地素材,有非常多的实现方式,不仅仅拘泥于一种,只要能将功能健壮的实现了,就是比较不错的了. 在一本资料上,看到了这样的一种jQuery的写法,还是非常的惊艳! element[hasClassName?"removeClass":"addClass"

vptr, vtable, virtual base class table

#include <iostream> using namespace std; class X { int x, y, z; }; class Y: public virtual X { }; class Z: public virtual X { virtual void f() { } }; class A: public Y, public Z { }; int main() { A *p; cout << "pointer:" << siz

table 中 thead tbody tfoot 加载顺序问题

这几个标记主要是用于提高table标签的加载以及显示的,说白了,就是分布加载.在传统的浏览器,在加载 时,是当所有的标签中元素都被下载后才会显示,当然这样的用户体验是不好的.再加入了这几个t打头的标签后,table就会分布的加载table中的元素,顺序依据写在table中的标签顺序进行. 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个