knockout.js
Debuggen einer Anwendung knockout.js

Überprüfen des Bindungskontexts eines DOM-Elements

Viele Fehler in Knockout-Datenbindungen werden durch undefinierte Eigenschaften in einem Ansichtsmodell verursacht. Knockout verfügt über zwei praktische Methoden, um den Bindungskontext eines HTML-Elements abzurufen:

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

Um den Bindungskontext eines Oberflächenelements schnell herauszufinden, haben Sie hier einen praktischen Trick:

Die meisten modernen Browser speichern das aktuell ausgewählte DOM-Element in einer globalen Variablen: $0 ( mehr zu diesem Mechanismus )

• Klicken Sie mit der rechten Maustaste auf ein Element in Ihrer Benutzeroberfläche und wählen Sie im Kontextmenü "inspect" oder "inspect element" .
• ko.dataFor($0) in der Entwicklerkonsole ko.dataFor($0) und drücken Sie die Eingabetaste

Es gibt auch Browser-Plugins, die beim Auffinden des Objektkontexts helfen können.

Ein Beispiel (versuchen Sie es mit einem Beispiel für eine Knockout-Hallo-Welt ):

Einen Bindungskontext aus Markup drucken

Manchmal ist es nützlich, eine aktuelle Bindung direkt aus dem Markup zu drucken. Ein ordentlicher Trick, der dies zulässt, besteht in der Verwendung eines zusätzlichen DOM-Elements mit einer nicht vorhandenen Bindung (KO <3.0), einer benutzerdefinierten Bindung oder einer nicht relevanten Bindung wie z. B. uniqueName .

Betrachten Sie dieses Beispiel:

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

Wenn Sie den Bindungskontext jedes Elements im People-Array herausfinden möchten, können Sie Folgendes schreiben:

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