淘汰数据绑定浏览器工具答案

【问题标题】：Knockout data-binding browser tools淘汰数据绑定浏览器工具
【发布时间】：2014-02-20 17:20:53
【问题描述】：

如何从浏览器工具触发数据绑定属性？在下面的示例中，如何通过浏览器工具将 showDiv 设置为 true 或 false？

    <div data-bind="visible:showDiv">Text</div>

【问题讨论】：

这取决于您如何创建视图模型以及您是否有它的参考。或者您可以使用 jQuery 或类似方法获取元素，然后使用 ko.dataFor 获取数据上下文并更改属性值。

【解决方案1】：

首先，您不会触发数据绑定，您可以触发可观察到的绑定到数据绑定内的绑定处理程序，

在您的示例中，假设showDiv 是一个可观察对象，无论何时更新该可观察对象，它都会触发数据绑定中visible 绑定处理程序的更新方法。

现在作为通用方式不仅限于您的情况，最简单的方法是使用开发人员工具（Chrome 和 Firefox）中的 $0 快捷方式，这将为您提供最后检查的 DOM 元素，以及 ko.dataFor 或 ko.contextFor 方法，它们接受 DOM 元素作为一个论点。

当您想查看页面上任何元素的底层视图模型并更新视图模型的属性（如果它们是可观察的）时，请执行以下操作：

现在您可以使用 ko.dataFor( $0 ) 获取该 DOM 元素背后的底层视图模型

ko.dataFor( $0 ).showDiv( true );   // your div is visible
ko.dataFor( $0 ).showDiv( false );  // not visible

在更复杂的场景中（在 foreach 中，或者有嵌套的视图模型时），您可能需要使用 ko.contextFor( $0 )

【讨论】：

有一个 Chrome 扩展程序可以将其缩短为 edit$data.showDiv(true)。它还（除其他外）在 devTools 中添加了一个面板，显示当前选定 DOM 元素的 Knockout 上下文！没有它，永远不要编写 Knockout 代码！（不，我没有写这个扩展 - 我真的非常喜欢它。）chrome.google.com/webstore/detail/knockoutjs-context-debugg/…

【解决方案2】：

就像在代码中显式设置值一样，您可以像这样从控制台设置可观察值：

viewModel.showDiv(true);

【讨论】：

【解决方案3】：

是否真的需要通过浏览器工具执行此操作？如果用于测试，您不能只创建一个调用视图模型中的函数的按钮来切换它的值吗？

在您的视图模型中（假设您有 showDiv 的 observable）：

var self = this;

self.showDiv = ko.observable(true);

self.toggleDiv = function () {
    self.showDiv(!self.showDiv());
}

那么：

<div data-bind="visible:showDiv">Text</div>
<input type="button" value="Toggle" data-bind="click: toggleDiv" />

示例：JSFiddle

否则我只需要在 JS 文件中创建一个断点并使用控制台来更改它的值。

【讨论】：