Monday 3 September 2012

Debugging Knockout.js

Knockout.js is really powerful. A consequence of being awesome is unfortunately that its magic makes it hard to debug when it doesn't behave as you expect.

Here's a trick that might come in handy if a data binding does not behave properly. You can print the the variables of the view model that is in the current scope by inserting this debugging tag in your HTML source.
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 3)"></pre>
Yielding a print like this in the rendered page
{
   "myViewModelVar1": "someValue",
   "myViewModelVar2": "someOtherValue"
}
You know any other handy tricks?