KnockoutJS のテンプレートバインディングエラーをデバッグするにはどうすればいいですか? 質問する

KnockoutJS のテンプレートバインディングエラーをデバッグするにはどうすればいいですか? 質問する

KnockoutJS テンプレートのデバッグの問題で困っています。

たとえば、「 」というプロパティにバインドしたいのですitemsが、テンプレートで入力ミスをして、(存在しない) プロパティ「item」にバインドしてしまいます。

Chrome デバッガーを使用すると、次の情報のみが表示されます。

"item" is not defined.

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

ベストアンサー1

特定のスコープで利用可能なデータに問題がある場合に私がよく行うことの 1 つは、テンプレート/セクションを次のようなものに置き換えることです。

<div data-bind="text: ko.toJSON($data)"></div>

あるいは、もう少し読みやすいバージョンが必要な場合:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

これにより、そのスコープでバインドされているデータが吐き出され、適切にネストされていることを確認できます。

更新: KO 2.1 時点次のように簡略化できます。

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

これで引数が に渡されますJSON.stringify

おすすめ記事