我在调试KnockoutJS模板中的问题时一直遇到麻烦。
假设我想绑定到一个名为“items”的属性，但在模板中我犯了一个错字，并绑定到(不存在的)属性“item”。
使用Chrome调试器只告诉我:
“item”没有定义。
是否有工具、技术或编码风格可以帮助我获得关于绑定问题的更多信息?
当前回答
这对我来说很管用:
<div data-bind="text: function(){ debugger; }()"></div>
其他回答
查看哪些数据被传递给绑定的最简单方法是将数据拖放到控制台:
<div data-bind="text: console.log($data)"></div>
Knockout将计算文本绑定的值(实际上这里可以使用任何绑定)并将$data刷新到控制台浏览器面板。
如果您使用Chrome进行开发，有一个非常棒的扩展(我没有加入)称为Knockoutjs上下文调试器，它直接在开发人员工具的元素面板中向您显示绑定上下文。
在JavaScript库文件中定义一次bindingHandler。
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};
而不是像这样简单地使用它:
<ul data-bind="debug: $data">
优势
使用Chrome调试器的全部功能，如元素面板中的显示 您不必向DOM添加自定义元素，只是为了调试
这个答案是基于Dirk Boer的答案。我添加到他的处理程序，使它也显示数据时，它正在更新:
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding (init):', element, ko.toJS(valueAccessor()));
},
update: function(element, valueAccessor)
{
console.log( 'Knockoutbinding (update):', element, ko.toJS(valueAccessor()));
}
};
然后，你所要做的就是在HTML代码中添加一个像这样的绑定:
<div data-bind="debug: $data">
在初始化或更新console.log时，您将在console.log中看到数据。
我创建了一个名为knock - through.js的github项目来帮助可视化这些错误。
https://github.com/JonKragh/knockthrough
它突出显示绑定错误，并提供该节点上的数据上下文的转储。
你可以在这里玩一个例子:http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
感谢RP Niemeyer，他在SO上出色的Knockout代码示例让我走到这一步。
