我在调试KnockoutJS模板中的问题时一直遇到麻烦。
假设我想绑定到一个名为“items”的属性，但在模板中我犯了一个错字，并绑定到(不存在的)属性“item”。
使用Chrome调试器只告诉我:
“item”没有定义。
是否有工具、技术或编码风格可以帮助我获得关于绑定问题的更多信息?
当前回答
我找到了另一个有用的方法。我正在调试一些绑定，并尝试使用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>
其他回答
我经常做的一件事是，当在某个范围内存在数据可用的问题时，将模板/节替换为如下内容:
<div data-bind="text: ko.toJSON($data)"></div>
或者，如果你想要一个可读性稍强的版本:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
这将输出在该范围内绑定的数据，并让您确保适当地嵌套了内容。
更新:从KO 2.1开始，你可以将其简化为:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
现在参数被传递给JSON.stringify。
我找到了另一个有用的方法。我正在调试一些绑定，并尝试使用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>
这对我来说很管用:
<div data-bind="text: function(){ debugger; }()"></div>
如果你在Magento项目中使用KnockoutJS，你可以使用Magento的自定义afterRender绑定:
<div afterRender="function (target, viewModel) {
console.log('Rendered element:', target);
console.log('Associated view model:', viewModel);
console.log(this === viewModel);
}"></div>
这个答案是基于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中看到数据。
