如何调试 KnockoutJS 的模板绑定错误？

javascript debugging knockout.js

2022-08-30 01:17:16

我在调试KnockoutJS模板中的问题时一直遇到麻烦。

假设我想绑定到一个名为“”的属性，但在模板中，我做了一个拼写错误并绑定到（不存在的）属性“”。itemsitem

使用Chrome调试器只能告诉我：

"item" is not defined.

是否有工具、技术或编码样式可以帮助我获取有关绑定问题的更多信息？

答案 1

当在特定范围内可用的数据出现问题时，我经常做的一件事是将模板/部分替换为以下内容：

<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

答案 2

如果您使用Chrome进行开发，那么有一个非常好的扩展（我不隶属于它）称为Knockoutjs上下文调试器，它直接在“开发人员工具”的“元素”面板中向您显示绑定上下文。