knockout.js
Felsöka ett knockout.js-program

Kontrollera bindande sammanhang för ett DOM-element

Många buggar i knockout-databindningar orsakas av odefinierade egenskaper i en visningsmodell. Knockout har två praktiska metoder för att hämta bindande sammanhang för ett HTML-element:

// 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);       

För att snabbt ta reda på det bindande sammanhanget för ett UI-element är här ett praktiskt trick:

De flesta moderna webbläsare lagrar det för närvarande valda DOM-elementet i en global variabel: $0 ( mer om denna mekanism )

• Högerklicka på ett element i ditt användargränssnitt och välj "inspektera" eller "inspektera element" i snabbmenyn.
• skriv ko.dataFor($0) i utvecklarkonsolen och tryck på enter

Det finns också webbläsarplugins som kan hjälpa till att hitta objektets sammanhang.

Ett exempel (prova på Knockout hej världsexempel ):

Skriva ut ett bindande sammanhang från markering

Ibland är det användbart att skriva ut en aktuell bindning direkt från markeringen. Ett snyggt trick som gör det möjligt att använda ett extra DOM-element med en icke-befintlig bindning (KO <3.0), anpassad bindning eller en bindning som inte är relevant, t.ex. uniqueName namn.

Tänk på detta exempel:

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

Om man skulle vilja ta reda på den bindande kontexten för varje element i folkfältet, kan man skriva:

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