javascriptdebuggingknockout.js

How to debug template binding errors for KnockoutJS?

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?

Solution

  • 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.