debugging - false - KnockoutJSのテンプレートバインディングエラーをデバッグするには?



ko foreach (7)

私はKnockoutJSテンプレートの問題をデバッグするのに問題があります。

" items "という名前のプロパティにバインドしたいとしますが、テンプレート内でタイプミスを行い、(存在しない)プロパティ " item "にバインドしitem

Chromeデバッガーを使用すると次のように表示されます:

"item" is not defined.

バインディングの問題に関する詳細情報を得るのに役立つツール、テクニック、コーディングスタイルはありますか?


Answer #1

ステップバイステップガイド

  1. このガイドでは、 公式のKnockoutJSの例を使用します。
  2. 2番目の連絡先(Sensei Miyagi)のデータを見たいとします。
  3. 2番目の連絡先(テキスト 'Sensei'を持つもの)の最初の入力ボックスを右クリックします。
  4. [要素の検査]を選択します。 Chromeデベロッパーツールバーが開きます。
  5. JavaScript Consoleウィンドウを開きます。 Chromeデベロッパーツールバーの左下にある>=アイコンをクリックするか、Chromeデベロッパーツールバーの[コンソール]タブを開くか、 Ctrl + Shift + Jを押してコンソールにアクセスできます
  6. 次のコマンドを入力し、Enterキーを押しますko.dataFor($0)
  7. これで、2番目の行にバインドされているデータが表示されます。 オブジェクトの左側にある小さな三角形を押すと、オブジェクトツリーを移動してデータを展開できます。
  8. 次のコマンドを入力し、Enterキーを押しますko.contextFor($0)
  9. これで、ルートとすべての親を含むノックアウトコンテキスト全体を含む複雑なオブジェクトが表示されるはずです。 これは、複雑なバインディング式を記述していて、異なる構文を試したい場合に便利です。

この黒い魔法は何ですか?

このトリックは、 Chromeの$ 0〜$ 4機能KnockoutJSのユーティリティメソッド 組み合わせです。 要するに、ChromeはChrome Developer Toolbarで選択した要素を記憶しており、これらの要素を別名$0$1$2$3$4公開します。 したがって、ブラウザの要素を右クリックして[要素の検査]を選択すると、この要素は自動的に別名$0利用できるようになります。 このトリックは、KnockoutJS、AngularJS、jQuery、または他のJavaScriptフレームワークで使用できます。

トリックのもう一つの面はKnockoutJSのユーティリティメソッドko.dataForとko.contextForです:

  • ko.dataFor(element) - ko.dataFor(element)とのバインディングに使用可能なデータを返します
  • ko.contextFor(element) - DOM要素で使用可能なバインディングコンテキスト全体を返します。

ChromeのJavaScriptコンソールは、完全に機能するJavaScriptランタイム環境です。 これは、単に変数を見ることに限定されないことを意味します。 ko.contextForの出力をko.contextForし、コンソールから直接viewmodelを操作することができます。 var root = ko.contextFor($0).$root; root.addContact();試してくださいvar root = ko.contextFor($0).$root; root.addContact(); var root = ko.contextFor($0).$root; root.addContact(); 何が起こるか見てみましょう:-)

ハッピーデバッグ!


Answer #2

JavaScriptライブラリファイルのどこかにbindingHandlerを一度定義します。

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

単にそれを好きに使うよりも、

<ul data-bind="debug: $data">

利点

  • Chromeのデバッガの機能を最大限に活用する、 [エレメントパネルに表示]
  • デバッグのためだけにカスタム要素をDOMに追加する必要はありません


Answer #3

バインディングに渡されるデータを確認する最も簡単な方法は、データをコンソールにドロップすることです。

<div data-bind="text: console.log($data)"></div>

ノックアウトは、テキストバインディングの値を評価し( 実際には、どのバインディングもここで使用できます )、$ dataをコンソールのブラウザパネルにフラッシュします。


Answer #4

他のすべての答えは素晴らしい、私はちょうど私が好きなものを追加しています:

あなたのビュー(すでにViewModelをバインドしていることが前提):

<div data-bind="debugger: $data"></div>

ノックアウトコード:

ko.bindingHandlers.debugger = {
    init: function (element, valueAccessor) {
        debugger;
    }
}

これはデバッガのコードを一時停止し、 elementvalueAccessor()は重要な情報を含みます。


Answer #5

私が使っている本当に簡単なことをチェックしてください:

function echo(whatever) { debugger; return whatever; }

または

function echo(whatever) { console.log(whatever); return whatever; }

それから、htmlでは、

<div data-bind="text: value"></div>

ちょうどそれを

<div data-bind="text: echo(value)"></div>

より高度な:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

楽しい :)

更新

別の厄介なことは、あなたが未定義の値にバインドしようとしているときです。 上の例では、データオブジェクトは{}ではない{{value: 'some text'}であるとします。 この場合、あなたは困っているでしょうが、次の微調整であなたは大丈夫です:

<div data-bind="text: $data['value']"></div> 

Answer #6

私はknockthrough.jsというgithubプロジェクトを作成し、これらのエラーを可視化しました。

https://github.com/JonKragh/knockthrough

バインディングエラーを強調表示し、そのノードのdatacontextをダンプします。

サンプルはこちらからhttp://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htmできます: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm : http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm : http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

彼の優れたノックアウトコードサンプルがRPのNiemeyerに与えられているので、この点まで私を連れてくることができます。


Answer #7

開発用にChromeを使用している場合は、デベロッパーツールのElementsパネルに直接バインディングコンテキストを表示するKnockoutjsコンテキストデバッガーと呼ばれる非常に優れた拡張機能があります(これは私が所属していません)。





knockout.js