使用Chrome控制台通過RequireJS訪問Knockout ViewModel

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.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網上應用店 - KnockoutJS上下文調試器

它允許您檢查元素並在元素窗格的側欄中查看它的上下文。 最有用的是你在頁面上有多個綁定上下文，或者非常嵌套的綁定上下文。

Answer 3

要求就是沒有全局變量：

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

正在再次引入全局變量

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

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