Knockout在视图中调试的例子

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

视图：

模型：

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时，会先执行右边的表达式，即(function(){debugger})()，当执行的时候遇到debugger，那么断点就打上了，如图：

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