Question

如果我正在使用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的当前值？

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 Context Debugger的原理，可在此处找到：

Chrome Web Store - KnockoutJS Context Debugger

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

Answer 3

要求就是没有全局变量：

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

再次引入全局变量

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

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

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

3 个答案: