Question

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

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

Answer 1

就像你在代码中明确设置一个值一样，你可以在控制台中设置你的可观察值，如下所示：

viewModel.showDiv(true);

Answer 2

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

在您的viewmodel中（假设您有showDiv的可观察对象）：

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文件中创建一个断点并使用控制台来改变它的值。

Answer 3

首先，你不要触发数据绑定，你可以触发一个observable绑定到data-bind内的绑定处理程序，

在您的示例中，假设showDiv是一个可观察的，每当您更新该observable时，它将触发数据绑定中visible绑定处理程序的更新方法。

现在作为通用方式，不仅限于你的情况，最简单的方法是利用开发人员工具（Chrome＆amp; Firefox）中的$0快捷方式，它将为您提供最后一次检查的DOM元素，以及ko.dataFor或ko.contextFor方法，他们接受DOM元素作为参数。

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

打开开发者工具
检查您想要的DOM元素（一旦您检查过它，它将在控制台中以$0变量形式提供）

现在您可以使用ko.dataFor( $0 )

获取该DOM元素背后的基础视图模型

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

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

淘汰数据绑定浏览器工具

3 个答案: