knockout.js
Een toepassing voor knockout.js debuggen

Controle van de bindende context van een DOM-element

Veel bugs in knock-out gegevensbindingen worden veroorzaakt door niet-gedefinieerde eigenschappen in een viewmodel. Knockout heeft twee handige methoden om de bindende context van een HTML-element op te halen:

// Returns the binding context to which an HTMLElement is bound
ko.contextFor(element);    

// Returns the viewmodel to which an HTMLElement is bound
// similar to: ko.contextFor(element).$data
ko.dataFor(element);       

Om snel de bindende context van een UI-element te achterhalen, is hier een handige truc:

De meeste moderne browsers slaan het momenteel geselecteerde DOM-element op in een globale variabele: $0 ( meer over dit mechanisme )

• Klik met de rechtermuisknop op een element in uw gebruikersinterface en kies 'inspecteren' of 'inspecteren element' in het contextmenu.
• type ko.dataFor($0) in de ontwikkelaarsconsole en druk op enter

Er bestaan ook browser-plug-ins die kunnen helpen bij het vinden van de objectcontext.

Een voorbeeld (probeer het op Knockout hallo world example ):

Een bindende context vanuit markup afdrukken

Soms is het handig om een huidige binding rechtstreeks vanuit markup af te drukken. Een handige truc die het mogelijk maakt om een extra DOM-element te gebruiken met een niet-bestaande binding (KO <3.0), aangepaste binding of een binding die niet relevant is, zoals uniqueName .

Beschouw dit voorbeeld:

<tbody data-bind="foreach: people">
    <tr>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
    </tr>
</tbody>

Als je de bindende context van elk element in de people array wilt weten, kun je schrijven:

<tbody data-bind="foreach: people">
    <span data-bind="uniqueName: console.log($data)"></span>
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>