Ich habe immer wieder Probleme beim Debuggen von Problemen in KnockoutJS-Vorlagen.

Angenommen, ich möchte an eine Eigenschaft namens “binden”items” aber in der Vorlage mache ich einen Tippfehler und binde an die (nicht vorhandene) Eigenschaft “item“.

Die Verwendung des Chrome-Debuggers sagt mir nur:

"item" is not defined.

Gibt es Tools, Techniken oder Codierungsstile, die mir helfen, mehr Informationen über das Bindungsproblem zu erhalten?

Eine Sache, die ich ziemlich oft mache, wenn es ein Problem damit gibt, welche Daten in einem bestimmten Bereich verfügbar sind, ist, die Vorlage/den Abschnitt durch etwas wie das Folgende zu ersetzen:

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

Oder, wenn Sie eine etwas besser lesbare Version wünschen:

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

Dadurch werden die Daten ausgegeben, die in diesem Bereich gebunden werden, und Sie können sicherstellen, dass Sie die Dinge ordnungsgemäß verschachteln.

Update: ab KO 2.1können Sie es vereinfachen zu:

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

Nun werden die Argumente weitergegeben JSON.stringify.

Wenn Sie Chrome für die Entwicklung verwenden, gibt es eine wirklich großartige Erweiterung (mit der ich nicht verbunden bin) namens Knockoutjs-Kontext-Debugger das zeigt Ihnen den Bindungskontext direkt im Bedienfeld „Elemente“ der Entwicklertools.

Definieren Sie einmal einen BindingHandlerirgendwo in Ihren JavaScript-Bibliotheksdateien.

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

als es einfach so zu verwenden:

<ul data-bind="debug: $data">

Vorteile

• Nutzen Sie die volle Leistung des Chrome-Debuggers, z Anzeige im Bedienfeld „Elemente“.
• Sie müssen Ihrem DOM keine benutzerdefinierten Elemente hinzufügen, nur zum Debuggen

Ich habe eine andere gefunden, die hilfreich sein kann. Ich habe einige Bindungen debuggt und versucht, Ryans Beispiel zu verwenden. Ich habe eine Fehlermeldung erhalten, dass JSON eine kreisförmige Schleife gefunden hat.

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

Bei diesem Ansatz wurde der Datenbindungswert jedoch durch Folgendes ersetzt:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: 'click me', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

Wenn ich jetzt auf das PRE-Element klicke, während das Chrome-Debug-Fenster geöffnet ist, erhalte ich ein gut gefülltes Bereichsvariablenfenster.

Habe einen etwas besseren Weg dafür gefunden:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

Schritt für Schritt Anleitung

1. Für diese Anleitung verwenden wir eine der offizielle KnockoutJS-Beispiele.
2. Angenommen, Sie möchten die Daten hinter dem zweiten Kontakt (Sensei Miyagi) sehen.
3. Klicken Sie mit der rechten Maustaste auf das erste Eingabefeld des zweiten Kontakts (dasjenige mit dem Text „Sensei“).
4. Wählen Sie „Element prüfen“. Die Chrome Developer Toolbar wird geöffnet.
5. Öffnen Sie das JavaScript-Konsolenfenster. Sie können auf die Konsole zugreifen, indem Sie auf klicken >= Symbol unten links in der Chrome-Entwicklersymbolleiste oder durch Öffnen der Registerkarte „Konsole“ in der Chrome-Entwicklersymbolleiste oder durch Drücken von Strg+Wechsel+J
6. Geben Sie den folgenden Befehl ein und drücken Sie die Eingabetaste: ko.dataFor($0)
7. Sie sollten jetzt die Daten sehen, die an die zweite Zeile gebunden sind. Sie können die Daten erweitern, indem Sie auf das kleine Dreieck links neben dem Objekt drücken, um durch den Objektbaum zu navigieren.
8. Geben Sie den folgenden Befehl ein und drücken Sie die Eingabetaste: ko.contextFor($0)
9. Sie sollten jetzt ein komplexes Objekt sehen, das den gesamten Knockout-Kontext enthält, einschließlich des Stamms und aller Eltern. Dies ist nützlich, wenn Sie komplexe Bindungsausdrücke schreiben und mit verschiedenen Konstrukten experimentieren möchten.

Was ist diese schwarze Magie?

Dieser Trick ist eine Kombination aus Die $0-$4-Funktion von Chrome und Die Utility-Methoden von KnockoutJS. Kurz gesagt, Chrome merkt sich, welche Elemente Sie in der Chrome Developer Toolbar ausgewählt haben, und zeigt diese Elemente unter dem Alias ​​an $0, $1, $2, $3, $4. Wenn Sie also in Ihrem Browser mit der rechten Maustaste auf ein Element klicken und „Element prüfen“ auswählen, wird dieses Element automatisch unter dem Alias ​​verfügbar $0. Sie können diesen Trick mit KnockoutJS, AngularJS, jQuery oder jedem anderen JavaScript-Framework verwenden.

Die andere Seite des Tricks sind die Hilfsmethoden ko.dataFor und ko.contextFor von KnockoutJS:

• ko.dataFor(element) – gibt die Daten zurück, die für die Bindung an das Element verfügbar waren
• ko.contextFor(element) – gibt den gesamten Bindungskontext zurück, der für das DOM-Element verfügbar war.

Denken Sie daran, dass die JavaScript-Konsole von Chrome eine voll funktionsfähige JavaScript-Laufzeitumgebung ist. Das bedeutet, dass Sie sich nicht nur auf Variablen beschränken müssen. Sie können die Ausgabe von speichern ko.contextFor und bearbeiten Sie das Ansichtsmodell direkt von der Konsole aus. Versuchen var root = ko.contextFor($0).$root; root.addContact(); und schau was passiert 🙂

Viel Spaß beim Debuggen!

Schauen Sie sich ein wirklich einfach Sache, die ich benutze:

function echo(whatever) { debugger; return whatever; }

Oder

function echo(whatever) { console.log(whatever); return whatever; }

Dann in HTML, sagen wir, Sie hatten:

<div data-bind="text: value"></div>

Ersetzen Sie es einfach durch

<div data-bind="text: echo(value)"></div>

Fortgeschrittener:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

Genießen 🙂

AKTUALISIEREN

Eine weitere ärgerliche Sache ist, wenn Sie versuchen, an einen undefinierten Wert zu binden. Stellen Sie sich im obigen Beispiel vor, dass das Datenobjekt nur {} und nicht { value: ‘some text’ } ist. In diesem Fall werden Sie in Schwierigkeiten geraten, aber mit der folgenden Optimierung wird es Ihnen gut gehen:

<div data-bind="text: $data['value']"></div> 

Ich habe ein Github-Projekt namens knockthrough.js erstellt, um diese Fehler zu visualisieren.

https://github.com/JonKragh/knockthrough

Es hebt Bindungsfehler hervor und gibt einen Dump des Datenkontexts auf diesem Knoten aus.

Hier können Sie mit einer Probe spielen: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

Danke an RP Niemeyer für seine exzellenten Knockout-Codebeispiele auf SO, die mich an diesen Punkt gebracht haben.