web-dev-qa-db-ja.com

Chrome Consoleを使用してRequireJSでKnockout ViewModelにアクセスする

ChromeコンソールでRequireJSを使用しているので、KnockOut ViewModel変数にどのようにアクセスしますか？

RequireJSを使用する前に、名前空間パターンに従って、1つのグローバル内のすべてを非表示にしました。 Chrome console：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の現在の値にどのようにアクセスしますか？

javascriptknockout.jsrequirejsgoogle-chrome-devtools
21
eh1160

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

そして、これがクロームでKnockoutJSをデバッグする方法のステップバイガイドです： http://devillers.nl/quick-debugging-knockoutjs-in-chrome/

chromeの$ 0_ $ 4機能を使用： https://developers.google.com/chrome-developer-tools/docs/commandline-api#0-4

34
RP Niemeyer

ライアンが示唆したように、最も簡単な方法はko.contextForおよびko.dataForコンソールでdomの要素のバインディングコンテキストを確認します。

非常に便利なChrome KnockoutJS Context Debuggerと呼ばれるこの原則を使用する拡張機能もあり、ここから入手できます：

Chromeウェブストア-KnockoutJSコンテキストデバッガー

要素を検査して、要素ペインのサイドバーでそのコンテキストを確認できます。ページ上に複数のバインディングコンテキストがある場合、または非常にネストされたバインディングコンテキストがある場合に最も便利です。

14
Nathan Jones

必要なのは、グローバルがないことです。

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

グローバルを再び導入しています

これはコンソールで使用できます。

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