knockout.js
knockout.jsアプリケーションのデバッグ

DOM要素のバインディングコンテキストの確認

ノックアウトデータバインドの多くのバグは、ビューモデル内の未定義のプロパティによって引き起こされます。 Knockoutには、HTML要素のバインディングコンテキストを取得する便利なメソッドが2つあります。

// Returns the binding context to which an HTMLElement is bound
ko.contextFor(element);    

// Returns the viewmodel to which an HTMLElement is bound
// similar to: ko.contextFor(element).$data
ko.dataFor(element);       

UI要素のバインディングコンテキストをすばやく調べるには、ここで便利なトリックです：

現代のブラウザーのほとんどは、現在選択されているDOM要素をグローバル変数に格納します。 $0 （ このメカニズムについて ）

• UIの要素を右クリックし、コンテキストメニューで「inspect」または「inspect element」を選択します。
• デベロッパーコンソールでko.dataFor($0)と入力してko.dataFor($0)を押します

ブラウザプラグインも存在し、オブジェクトコンテキストの検索を支援することができる。

例（ ノックアウトの世界の例でそれを試してみてください）：

マークアップからバインディングコンテキストを出力する

現在のバインディングをマークアップから直接印刷すると便利なことがあります。これを可能にするきちんとしたトリックは、存在しないバインディング（KO <3.0）、カスタムバインディング、またはuniqueNameなどの関連性のないバインディングを持つ追加のDOM要素を使用することです。

この例を考えてみましょう。

<tbody data-bind="foreach: people">
    <tr>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
    </tr>
</tbody>

people配列内の各要素のバインディング・コンテキストを調べる場合は、次のように記述します。

<tbody data-bind="foreach: people">
    <span data-bind="uniqueName: console.log($data)"></span>
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>