如何调试 KnockoutJS 的模板绑定错误? [英] How to debug template binding errors for 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>
现在参数被传递给 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屋！