小虾虎鱼

小虾虎鱼

Knockout在视图中调试的方法

作者 禾惠 发表于 2015/06/24,最后修改于 2015/06/24

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

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

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

knockout.png

所有的对象全在$content中,其中也能查出$root$parent$parents$data$index、等,其中$parents就包含了viewmodel1viewmodel2

以上是在工作中寻找到的在视图中调试knockout的一个技巧(小 虾虎鱼原创),在开发中用处还是挺大的。