22

RequireJS を使用しているため、Chrome コンソールで KnockOut ViewModel 変数にアクセスするにはどうすればよいですか?

RequireJS を使用する前は、1 つのグローバル内にすべてを隠して名前空間パターンに従っていました。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か?

4

3 に答える 3

35

Knockout には、指定された要素の KO ビュー モデル情報にアクセスできる関数が含まko.dataForれています。ko.contextFor

したがって、コンソールでは、次のようなことができます。

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 を chrome でデバッグする方法のステップ バイ ガイド: http://devillers.nl/quick-debugging-knockoutjs-in-chrome/

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

于 2013-03-09T13:35:10.680 に答える
14

Ryan が示唆したように、コンソールでko.contextForandを使用して、dom 上の要素のバインディング コンテキストを確認するのが最も簡単な方法です。ko.dataFor

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

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

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

于 2013-04-04T02:42:45.330 に答える
11

Require は、グローバルを持たないことがすべてです:

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

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

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

require("knockout").dataFor($0);
require("knockout").contextFor($0);
于 2013-10-18T05:02:16.013 に答える