如何为KnockoutJS调试模板绑定错误?

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

假设我想绑定到一个名为“items”的属性，但在模板中我犯了一个错字，并绑定到(不存在的)属性“item”。

使用Chrome调试器只告诉我:

“item”没有定义。

是否有工具、技术或编码风格可以帮助我获得关于绑定问题的更多信息?

当前回答

我经常做的一件事是，当在某个范围内存在数据可用的问题时，将模板/节替换为如下内容:

<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。

其他回答

查看哪些数据被传递给绑定的最简单方法是将数据拖放到控制台:

<div data-bind="text: console.log($data)"></div>

Knockout将计算文本绑定的值(实际上这里可以使用任何绑定)并将$data刷新到控制台浏览器面板。

所有其他的答案都很好，我只是添加了我喜欢做的事情:

在你的视图中(假设你已经绑定了一个ViewModel):

<div data-bind="debugger: $data"></div>

淘汰赛代码:

ko.bindingHandlers.debugger = {
    init: function (element, valueAccessor) {
        debugger;
    }
}

这将暂停调试器中的代码，element和valueAccessor()将包含有价值的信息。

这对我来说很管用:

<div data-bind="text: function(){ debugger; }()"></div>

我创建了一个名为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代码示例让我走到这一步。

我经常做的一件事是，当在某个范围内存在数据可用的问题时，将模板/节替换为如下内容:

<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。

推荐文章