How to debug template binding errors for KnockoutJS ?

How to debug template binding errors for KnockoutJS ?

Asked on November 14, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

       Replace the template/section will give solution something like:

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

       For 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 alert you to nesting things appropriately.

    Update: as of KO 2.1,  Simplify it to:

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

       Now the arguments are passed on to JSON.stringify.

    Answered on November 14, 2018.
    Add Comment

    If  Chrome are using for development, there is a really great extension called Knockoutjs context debugger that shows the binding context directly in the Developer Tools’ Elements panel.

    Answered on November 14, 2018.
    Add Comment

    Drop the data to console is the easiest way to see what data are passed to binding:

    <div data-bind="text: console.log($data)"></div>
    
    

    Knockout will evaluate value for text binding  and flushes $data to console browser panel.

    Answered on November 14, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.