我在调试KnockoutJS模板中的问题时一直遇到麻烦。
假设我想绑定到一个名为“items”的属性，但在模板中我犯了一个错字，并绑定到(不存在的)属性“item”。
使用Chrome调试器只告诉我:
“item”没有定义。
是否有工具、技术或编码风格可以帮助我获得关于绑定问题的更多信息?
当前回答
如果您使用Chrome进行开发，有一个非常棒的扩展(我没有加入)称为Knockoutjs上下文调试器，它直接在开发人员工具的元素面板中向您显示绑定上下文。
其他回答
所有其他的答案都很好，我只是添加了我喜欢做的事情:
在你的视图中(假设你已经绑定了一个ViewModel):
<div data-bind="debugger: $data"></div>
淘汰赛代码:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}
这将暂停调试器中的代码，element和valueAccessor()将包含有价值的信息。
在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添加自定义元素，只是为了调试
我创建了一个名为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代码示例让我走到这一步。
我找到了另一个有用的方法。我正在调试一些绑定，并尝试使用ryan的例子。我得到了一个错误，JSON发现了一个循环。
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>
但是，使用这种方法a将数据绑定值替换为以下内容:
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: 'click me', click: function() {debugger}"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>
现在如果我点击PRE元素，同时有chrome调试窗口打开，我得到一个很好的填充范围变量窗口。
找到了一个更好的方法:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>
如果你是在Visual studio和IE中开发，我更喜欢这样data-bind="somebinding:(函数(){调试器;返回bindvalue;}) ()我喜欢它比echo函数，因为它会去脚本与所有的绑定，而不是eval文件，你可以只看$context $data(我在Chrome中也使用这个);
