我在调试KnockoutJS模板中的问题时一直遇到麻烦。
假设我想绑定到一个名为“items”的属性，但在模板中我犯了一个错字，并绑定到(不存在的)属性“item”。
使用Chrome调试器只告诉我:
“item”没有定义。
是否有工具、技术或编码风格可以帮助我获得关于绑定问题的更多信息?
当前回答
如果你在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>
其他回答
查看哪些数据被传递给绑定的最简单方法是将数据拖放到控制台:
<div data-bind="text: console.log($data)"></div>
Knockout将计算文本绑定的值(实际上这里可以使用任何绑定)并将$data刷新到控制台浏览器面板。
如果你是在Visual studio和IE中开发，我更喜欢这样data-bind="somebinding:(函数(){调试器;返回bindvalue;}) ()我喜欢它比echo函数，因为它会去脚本与所有的绑定，而不是eval文件，你可以只看$context $data(我在Chrome中也使用这个);
如果你在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>
所有其他的答案都很好，我只是添加了我喜欢做的事情:
在你的视图中(假设你已经绑定了一个ViewModel):
<div data-bind="debugger: $data"></div>
淘汰赛代码:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}
这将暂停调试器中的代码，element和valueAccessor()将包含有价值的信息。
这个答案是基于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中看到数据。
