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

Question

我一直在调试KnockoutJS模板中的问题.

假设我想绑定到名为" items" 的属性,但在模板中我输入错字并绑定到(不存在的)属性" item".

使用Chrome调试器只会告诉我:

"item" is not defined.

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

Answer 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.

Answer 2

如果您正在使用Chrome进行开发,那么有一个非常棒的扩展(我没有附属),称为Knockoutjs上下文调试器,它直接在Developer Tools的Elements面板中显示绑定上下文.

Answer 3

在JavaScript库文件中的某个位置定义一次bindingHandler.

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

而不是简单地使用它喜欢这样:

<ul data-bind="debug: $data">

好处

• 使用Chrome调试器的全部功能,例如" 元素面板中的显示"
• 您不必为DOM添加自定义元素,仅用于调试

Answer 4

我找到了另一个可以帮助的人.我正在调试一些绑定并尝试使用Ryans示例.我收到JSON发现循环循环的错误.

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

但是,使用此方法,将data-bind值替换为以下内容:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: 'click me', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

现在,如果我在打开chrome调试窗口的同时单击PRE元素,我会得到一个很好的填充范围变量窗口.

找到一个更好的方法:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

Answer 5

一步一步指导

1. 对于本指南,我们将使用官方的KnockoutJS示例之一.
2. 假设您想查看第二个联系人(Sensei Miyagi)背后的数据.
3. 右键单击第二个联系人的第一个输入框(带有"Sensei"文本的第一个输入框).
4. 选择"检查元素".Chrome开发者工具栏将会打开.
5. 打开JavaScript控制台窗口.您可以通过点击>=Chrome开发者工具栏左下角的图标,或打开Chrome开发者工具栏中的"控制台"标签,或按Ctrl+ Shift+ 来访问控制台J
6. 输入以下命令,然后按Enter键: ko.dataFor($0)
7. 您现在应该看到绑定到第二行的数据.您可以通过按对象左侧的小三角形来展开数据以导航对象树.
8. 输入以下命令,然后按Enter键: ko.contextFor($0)
9. 您现在应该看到一个包含整个Knockout上下文的复杂对象,包括根和所有父项.当您编写复杂的绑定表达式并且想要尝试不同的构造时,这非常有用.

这个黑魔法是什么？

这个技巧结合了Chrome的$ 0- $ 4功能和KnockoutJS的实用程序方法.总之,Chrome会记住您在Chrome开发者工具栏选择哪些元素,并公开化名这些元素$0,$1,$2,$3,$4.因此,当您右键单击浏览器中的元素并选择"Inspect element"时,此元素将在别名下自动变为可用$0.您可以将此技巧与KnockoutJS,AngularJS,jQuery或任何其他JavaScript框架一起使用.

另一方面是KnockoutJS的实用方法ko.dataFor和ko.contextFor:

• ko.dataFor(element) - 返回可用于绑定元素的数据
• ko.contextFor(element) - 返回DOM元素可用的整个绑定上下文.

请记住,Chrome的JavaScript控制台是一个功能齐全的JavaScript运行时环境.这意味着您不仅限于查看变量.您可以ko.contextFor直接从控制台存储视图模型的输出和操作视图模型.试着var root = ko.contextFor($0).$root; root.addContact();看看会发生什么:-)

快乐的调试!

Answer 6

看看我使用的一个非常简单的事情:

function echo(whatever) { debugger; return whatever; }

要么

function echo(whatever) { console.log(whatever); return whatever; }

然后在html中说,你有:

<div data-bind="text: value"></div>

只需更换它

<div data-bind="text: echo(value)"></div>

更先进:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

请享用 :)

UPDATE

另一个烦人的事情是当你试图绑定到一个未定义的值.想象一下,在上面的例子中,数据对象只是{}而不是{value:'some text'}.在这种情况下,你将遇到麻烦,但通过以下调整,你会没事的:

<div data-bind="text: $data['value']"></div> 

Answer 7

我创建了一个名为knockthrough.js的github项目来帮助可视化这些错误.

https://github.com/JonKragh/knockthrough

它突出显示绑定错误,并在该节点上转储datacontext.

你可以在这里玩一个样本:http://htmlpreview.github.io/？https://github.com/JonKragh/knockthrough/blob/master/default.htm

感谢RP Niemeyer在SO上提供了出色的Knockout代码示例,让我明白这一点.