Knockout在视图中调试的例子

在使用knockout开发中经常会遇到类似于这样的报错情况:Uncaught ReferenceError: Unable to process binding "text: function (){return title }",当模型比较简单的时候我们可以很容易找出问题,一般只要找出报错中的title在$root、$parent、$data三个对象中的哪一个。 如果使用到了knockout组件,那么问题就变得更复杂了。例如:

视图:

<div data-bind="text:title"></div>
<div data-bind="component:componentName"></div>
<script type="text/html" id="tpl">
    <ul data-bind="foreach:list">
        <li data-bind="text:name"></li>
    </ul>
</script>

模型:

 

var viewmodel1 = function(){
    this.title = ko.observable("小虾虎鱼");
    this.componentName = "component-name";
}
 
var viewmodel2 = function(){
    this.list = ko.observableArray([{name:"a"},{name:"b"}]);
}
 
ko.components.register("component-name",{
    viewModel:viewmodel2,
    template:document.getElementById("tpl").innerHTML
});
 
ko.applyBindings(new viewmodel1);

如果想在<li data-bind="text:name"></li>.中得到viewmodel1和viewmodel2中的数据,那该怎么写? 回归正题,如何在视图中进行调试knockout,能在视图中调试js那么上面的问题也就很容易得到解决。在html中的data-bind属于属性,而非js,所以无法通过打断点来进行调试,那么只能通过debugger来进行调试了,于是我们可以对<li data-bind="text:name"></li>.做一些修改, 当foreach到text:name的时候先会执行name这个表达式,执行之后将得到的文本放到元素中,那么我们对这个表达式做点修改:

<li data-bind="text: (function(){debugger})()"></li>

当执行到li时,会先执行右边的表达式,即(function(){debugger})(),当执行的时候遇到debugger,那么断点就打上了,如图:

所有的对象全在$content中,其中也能查出$root、$parent、$parents、$data、$index、等,其中$parents就包含了viewmodel1和viewmodel2。
以上是在工作中寻找到的在视图中调试knockout的一个技巧(小 虾虎鱼原创),在开发中用处还是挺大的。

时间: 2016-09-16

Knockout在视图中调试的例子的相关文章

在PL/SQL 开发中调试存储过程和函数的一般性方法

存储过程|函数 在PL/SQL 开发中调试存储过程和函数的一般性方法摘要: Oracle 在PLSQL中提供的强大特性使得数据库开发人员可以在数据库端完成功能足够复杂的任务, 本文将结合Oracle提供的相关程序包(package)以及一个非常优秀的第三方开发工具来介绍在PLSQL中开发及调试存储过程的方法,当然也适用于函数. 版权声明: 本文可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息.原文出处: http://www.aiview.com/notes/ora_using_

SQL Server 2000的视图中必须小心使用*符号

有些朋友看到这个标题可能会有疑问,难道在视图中使用*符号还有何要注意的地方吗?对于这个问题,我们先不必回答,先看一下例子吧. 我这里,使用的数据库是SqlServer2000自带的Northwind,这样方便大家自己私下里测试.首先,创建两个视图,视图的脚本如下: --视图 vCustomersA create view vCustomersA as select CustomerID ,CompanyName,ContactName,ContactTitle, Address,City,Reg

c++-MFC 单文档 多视图中各视图的创建顺序能否改变?

问题描述 MFC 单文档 多视图中各视图的创建顺序能否改变? 每个视图OnInitialupdate()的顺序能否改变? 我每个视图的创建顺序先后会互相影响,所以需要各视图能按我希望的顺序创建 我之前猜测CMainFrame::OnCreateClient中各视图的分割语句顺序可能影响其创建顺序,但是刚才调试发现貌似不是的.. 解决方案 将那些涉及顺序的代码从OnInitialupdate()提取出来,作为独立的函数. 定义一个全局变量,比如int steps=0 每个OnInitialupda

[译] 在 Chrome 开发者工具中调试 node.js

本文讲的是[译] 在 Chrome 开发者工具中调试 node.js, 这篇文章介绍了一种在 Chrome 开发者工具里面开发.调试和分析 Node.js 应用程序的新方法. devtool 最近我一直在开发一个命令行工具 devtool,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node

android-在列表视图中的map标题

问题描述 android-在列表视图中的map标题 在我的应用程序中,在底部有一个包含了一个图片和一个列表视图的activity.下边的这些是我想在activity中做的. 1.页面顶部的图片视图必须转换类型来显示其他的图片. 2.当列表视图滚动的时候,图片必须跟着他一起滚动. 3.在同样的activity中有一个button,当点击button的时候,图像必须转成一个mapview. 我已经做的是, 1.我已经让图像视图和mapview在试图转换器中成为了一个单独的布局,并且命名为header

新手看不懂php在浏览器中调试的出错信息 ,求帮解释

问题描述 新手看不懂php在浏览器中调试的出错信息 ,求帮解释 本人小白,刚开始自学,照书上写个简单的博客的例子,xampp+phpstorm,然后一运行出来这些信息,求高人帮忙看看. PS:例程用到MySQL,我确定数据库连接成功了,在这些信息底下显示的是查询语句的输出结果,也确定没问题,只是中间夹了这么一段完全不知道是什么意思,求高人指点. 再PS:我的phpmyadmin没法用,点啥都显示loading,不知有没有关系 解决方案 貌似是内存的错误,你打印一下错误然后再试试

《iOS 6核心开发手册(第4版)》——1.13节秘诀:从滚动视图中拖动

1.13 秘诀:从滚动视图中拖动 iOS 6核心开发手册(第4版) iOS的丰富的姿势识别器集并不总是能够准确地实现你想要达到的目标.下面举一个例子.设想一个水平滚动的视图,其中一个接一个地填充图像视图,因此可以左右滚动,查看完整的集合.现在,设想你希望能够把项目拖出那个视图,并把它们添加到滚动区域下面的空间中.为此,需要识别那些子视图上向下的触摸(也就是说,垂直于滚动的方向). 这是我在尝试帮助开发人员Alex Hosgrove时所遇到的一道难题,他尝试构建一个应用程序,它粗略等价于一组冰箱磁

eclipse图标-eclipse debug视图 变量图标是什么意思?怎么和Outline视图中图标不一样?

问题描述 eclipse debug视图 变量图标是什么意思?怎么和Outline视图中图标不一样? eclipse debug视图 变量图标是什么意思?怎么和Outline视图中图标不一样?比如private 成员变量 ,在Outline中的图标 ,和 debug视图中的 图标就不一样? 解决方案 Debug是调试时的视图,Outline可以看到一个类里面定义的方法,常量,变量.每个视图有不同的作用.

[译] Node.js 之战: 如何在生产环境中调试错误

本文讲的是[译] Node.js 之战: 如何在生产环境中调试错误, 原文地址:Node.js War Stories: Debugging Issues in Production 原文作者:Gergely Nemeth 译文出自:掘金翻译计划 译者:mnikn 校对者:lsvih.Aladdin-ADD Node.js 之战: 在生产环境中调试错误 在这篇文章,这篇文章讲述了 Netflix.RisingStack 和 nearForm 在生产环境中遇到 Node.js 错误的故事 - 因此