Question

21

How to debug template binding errors for KnockoutJS?

rated 0 times [ 25] [ 4] / answers: 1 / hits: 70914 / 13 Years ago, mon, february 13, 2012, 12:00:00

I keep having trouble with debugging problems in KnockoutJS templates.

Say I want to bind to a property called items but in the template I make a typo and bind to the (non existing) property item.

Using the Chrome debugger only tells me:

item is not defined.

Are there tools, techniques or coding styles that help me get more information about the binding problem?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyquandaquanl

Add To Favorites

Follow

Total Points: 122

Total Questions: 109

Total Answers: 101

Location: South Georgia

Member since Sun, Aug 8, 2021

3 Years ago

answered 13 Years ago harleyaleenag · Accepted Answer

One thing that I do quite often when there is an issue with what data is available at a certain scope is to replace the template/section with something like:

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

Or, if you want a slightly more readable version:

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

This will spit out the data that is being bound at that scope and let you make sure that you are nesting things appropriately.

Update: as of KO 2.1, you can simplify it to:

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

Now the arguments are passed on to JSON.stringify.