如何调试KnockoutJS的模板绑定错误？ [英] How to debug template binding errors for KnockoutJS?

问题描述

说我想绑定到一个名为 items ，但是在模板中我打错了并绑定到（不存在）属性项目。

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

I keep having trouble with debugging problems in KnockoutJS templates.

Say I want to bind to a property called "items" but in the template I make a typo and bind to the (non existing) property "item".

Using the Chrome debugger only tells me:

"item" is not defined.

Are there tools, techniques or coding styles that help me get more information about the binding problem?

解决方案

One thing that I do quite often when there is an issue with what data is available at a certain scope is to replace the template/section with something like:

<div data-bind="text: ko.toJSON($data)"></div>

Or, if you want a slightly more readable version:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

This will spit out the data that is being bound at that scope and let you make sure that you are nesting things appropriately.

Update: as of KO 2.1, you can simplify it to:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Now the arguments are passed on to JSON.stringify.

这篇关于如何调试KnockoutJS的模板绑定错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！