使用Chrome控制台访问Knockout ViewModel与RequireJS

Question

我如何在Chrome控制台访问KnockOut ViewModel变量，现在我正在使用RequireJS?

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

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

require(['knockout-2.2.0', 'jquery'], function (ko, jQuery) {
    var ViewModel = function () {
            var testVar = ko.observable(true);
        };
    ko.applyBindings(new ViewModel());
}

那么我如何访问示例中testVar的当前值呢?

Answer 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

Answer 2

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

还有一个非常有用的Chrome扩展，使用这个原则称为KnockoutJS上下文调试器，可在这里:

Chrome Web Store - KnockoutJS Context Debugger

它允许你检查一个元素，并在元素窗格的侧边栏中查看它的上下文。当你在一个页面上有多个绑定上下文，或者非常嵌套的绑定上下文时，它是最有用的。

Answer 3

Require是关于不使用全局变量的:

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

又引入了全局变量

您可以在控制台中使用:

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