使用 Chrome 控制台通过 RequireJS 访问 Knockout ViewModel答案

【问题标题】：Using Chrome Console to Access Knockout ViewModel with RequireJS使用 Chrome 控制台通过 RequireJS 访问 Knockout ViewModel
【发布时间】：2013-02-24 23:32:49
【问题描述】：

既然我正在使用 RequireJS，如何在 Chrome 控制台中访问 KnockOut ViewModel 变量？

在使用 RequireJS 之前，我遵循命名空间模式，将所有内容隐藏在一个全局变量中。我可以通过在 Chrome 控制台中输入以下内容来访问全局：window.namespaceVar。

但是现在我使用的是 RequireJS，我所有的变量都隐藏在 require 函数后面。

require(['knockout-2.2.0', 'jquery'], function (ko, jQuery) {

    var ViewModel = function () {
            var testVar = ko.observable(true);
        };

    ko.applyBindings(new ViewModel());
}

那么在示例中如何访问testVar 的当前值？

【问题讨论】：

好吧，你不能 - chrome 控制台不是 javascript 调试器！但是为什么不使用console.log(testVar); 来检查该变量的值呢？
您可以在 chrome 中使用断点并检查值
@Niko testVar 绑定到函数范围，不能从外部访问。

标签： javascript knockout.js requirejs google-chrome-devtools

【解决方案1】：

Knockout 包括函数 ko.dataFor 和 ko.contextFor，它们可以让您访问给定元素的 KO 视图模型信息。

因此，在控制台中，您可以执行以下操作：

var vm = ko.dataFor(document.body);

在您的情况下，testVar 未公开，因此您仍然无法访问它。我认为您的只是一个示例，您的意思是：

var ViewModel = function () {
     this.testVar = ko.observable(true);
};

现在，使用上述方法，您可以通过 vm.testVar() 访问 vm.testVar 及其值

以下是我们关于这些函数的文档：http://knockoutjs.com/documentation/unobtrusive-event-handling.html

这里是关于如何使用 chrome 调试 KnockoutJS 的分步指南： http://devillers.nl/quick-debugging-knockoutjs-in-chrome/

使用 Chrome 的 $0_$4 功能：https://developers.google.com/chrome-developer-tools/docs/commandline-api#0-4

【讨论】：

Ryan，当我输入 var = vm = ko.dataFor(document.body); 时，我收到“ReferenceError: ko is not defined”
啊，如果你是通过require.js来加载KO，那么它也不会是全局的。通常我已经在全球范围内公开了 Knockout window.ko = ko; 以便能够做这样的事情。
这是一个很好的解决方法。我不知道为什么我没有早点！谢谢！
如果使用 Chrome 调试器选择元素，可以使用语法：ko.dataFor($0) and ko.contextFor($0) devillers.nl/blog/quick-debugging-knockoutjs-in-chrome

【解决方案2】：

正如 Ryan 建议的那样，最快的方法是在控制台中使用 ko.contextFor 和 ko.dataFor 来查看 dom 上元素的绑定上下文。

还有一个非常有用的 Chrome 扩展程序使用了这个原理，称为 KnockoutJS 上下文调试器，可在此处获得：

Chrome Web Store - KnockoutJS Context Debugger

它允许您检查元素并在元素窗格的侧边栏中查看它的上下文。如果您在一个页面上有多个绑定上下文或非常嵌套的绑定上下文，这将非常有用。

【讨论】：

2017 年 6 月 Chrome 崩溃

【解决方案3】：

Require 就是没有全局变量：

require(["knockout"],function(ko){ window.ko=ko;});

再次引入全局变量

您可以在控制台中使用它：

require("knockout").dataFor($0);
require("knockout").contextFor($0);

【讨论】：