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

Using Chrome Console to Access Knockout ViewModel with RequireJS

提问by eh1160

How do I access the KnockOut ViewModel variables in the Chrome console now that I am using RequireJS?

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

Before using RequireJS, I followed a namespacing pattern, hiding everything within a single global. I could access the global by typing the following into the Chrome console: window.namespaceVar.

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

But now that I am using RequireJS, all my variables are hidden behind the require function.

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

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

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

    ko.applyBindings(new ViewModel());
}

So how would I access the current value of testVarin the example?

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

回答by RP Niemeyer

Knockout includes the functions ko.dataForand ko.contextForthat will give you access to the KO view model information given an element.

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

So, in the console, you can do something like:

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

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

In your case, testVaris not exposed, so you would still not be able to access it. I assume that yours was just a sample though and you meant something like:

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

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

Now, using the above method you would be able to access vm.testVarand its value by doing vm.testVar()

现在，使用上述方法，您将能够vm.testVar通过执行访问及其值vm.testVar()

Here are the docs that we have on these functions: http://knockoutjs.com/documentation/unobtrusive-event-handling.html

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

and here's a step-by-guide on how to debug KnockoutJS with chrome: http://devillers.nl/quick-debugging-knockoutjs-in-chrome/

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

using Chrome's $0_$4 feature: https://developers.google.com/chrome-developer-tools/docs/commandline-api#0-4

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

回答by Nathan Jones

As Ryan suggested, the quickest way is to use ko.contextForand ko.dataForin the console to see the binding context of an element on the dom.

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

There's also a very useful Chrome Extension that uses this principle called KnockoutJS Context Debugger, available here:

还有一个非常有用的 Chrome 扩展程序，它使用了这一原理，称为 KnockoutJS Context Debugger，可在此处获得：

Chrome Web Store - KnockoutJS Context Debugger

Chrome 网上应用店 - KnockoutJS 上下文调试器

It allows you to inspect an element and see it's context in the sidebar of the elements pane. It's most useful it you have multiple binding contexts on a page, or very nested binding contexts.

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

回答by Martijn

Require is all about not having globals:

Require 就是没有全局变量：

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

is introducing globals again

再次引入全局变量

You can use this in the console:

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

require("knockout").dataFor(##代码##);
require("knockout").contextFor(##代码##);