Ich habe immer wieder Probleme beim Debuggen von Problemen in KnockoutJS-Vorlagen.
Angenommen, ich möchte an eine Eigenschaft namens " items
" binden, 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, mit denen ich weitere Informationen zum Bindungsproblem erhalten kann?
quelle
name
es ein beobachtbares Tun istname.subscribe(function(newValue) { console.log("name", newValue); });
foreach
Szenario, und ich finde es einfacher, sie auf der Seite innerhalb des relevanten gerenderten Markups zu sehen, als die Konsole zu durchsuchen. Kommt nur auf die Situation an. Noch ein paar meiner Gedanken hier: knockmeout.net/2013/06/… . Möglicherweise möchten Sie auch eine "saubere" Version in Ihrer Bindung wie protokollierenconsole.log(ko.toJS(valueAccessor())
.Wenn Sie Chrome für die Entwicklung verwenden, gibt es eine wirklich großartige Erweiterung (mit der ich nicht verbunden bin) namens Knockoutjs Kontextdebugger , die Ihnen den Bindungskontext direkt im Elementfenster der Entwicklertools anzeigt.
quelle
Definieren Sie einen BindingHandler einmal irgendwo in Ihren JavaScript-Bibliotheksdateien.
als einfach zu benutzen mag es so:
Vorteile
quelle
Ich habe eine andere gefunden, die hilfreich sein kann. Ich habe einige Bindungen getestet und versucht, Ryans Beispiel zu verwenden. Ich habe die Fehlermeldung erhalten, dass JSON eine kreisförmige Schleife gefunden hat.
Bei Verwendung dieses Ansatzes wurde der Datenbindungswert jedoch durch den folgenden ersetzt:
Wenn ich jetzt auf das PRE-Element klicke, während das Chrome-Debug-Fenster geöffnet ist, erhalte ich ein gut gefülltes Fenster mit Bereichsvariablen.
Einen besseren Weg dafür gefunden:
quelle
Schritt für Schritt Anleitung
>=
Symbol unten links in der Chrome Developer-Symbolleiste klicken oder die Registerkarte "Konsole" in der Chrome Developer-Symbolleiste öffnen oder Ctrl+ Shift+ drückenJko.dataFor($0)
ko.contextFor($0)
Was ist das für schwarze Magie?
Dieser Trick ist eine Kombination aus der Funktion $ 0- $ 4 von Chrome und den Dienstprogrammmethoden von KnockoutJS . Kurz gesagt, Chrome merkt sich, welche Elemente Sie in der Chrome - Entwickler ausgewählt haben Toolbar und setzt diese Elemente unter dem Alias
$0
,$1
,$2
,$3
,$4
. Wenn Sie also mit der rechten Maustaste auf ein Element in Ihrem Browser klicken und "Element überprüfen" auswählen, wird dieses Element automatisch unter dem Alias verfügbar$0
. Sie können diesen Trick mit KnockoutJS, AngularJS, jQuery oder einem anderen JavaScript-Framework verwenden.Die andere Seite des Tricks sind die Dienstprogrammmethoden 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 warenko.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. Dies bedeutet, dass Sie sich nicht nur auf Variablen beschränken müssen. Sie können die Ausgabe des
ko.contextFor
Ansichtsmodells direkt von der Konsole aus speichern und bearbeiten. Versuche zuvar root = ko.contextFor($0).$root; root.addContact();
sehen, was passiert :-)Viel Spaß beim Debuggen!
quelle
Schauen Sie sich eine wirklich einfache Sache an, die ich benutze:
Oder
Dann hatten Sie in HTML:
Ersetzen Sie es einfach durch
Fortgeschrittener:
Genießen :)
AKTUALISIEREN
Eine andere ärgerliche Sache ist, wenn Sie versuchen, an einen undefinierten Wert zu binden. Stellen Sie sich im obigen Beispiel vor, dass das Datenobjekt nur {} nicht {value: 'some text'} ist. In diesem Fall werden Sie in Schwierigkeiten geraten, aber mit der folgenden Optimierung wird es Ihnen gut gehen:
quelle
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 Speicherauszug des Datenkontexts auf diesem Knoten aus.
Sie können hier mit einem Beispiel spielen: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
Dank an RP Niemeyer für seine hervorragenden Knockout-Codebeispiele auf SO, die mich an diesen Punkt bringen.
quelle
Der einfachste Weg, um zu sehen, welche Daten an die Bindung übergeben werden, besteht darin, die Daten an die Konsole zu senden:
Knockout wertet den Wert für die Textbindung aus ( jede Bindung kann hier tatsächlich verwendet werden ) und löscht $ data in das Konsolenbrowserfenster.
quelle
Alle anderen Antworten werden großartig funktionieren. Ich füge nur hinzu, was ich gerne mache:
In Ihrer Ansicht (vorausgesetzt, Sie haben bereits ein ViewModel gebunden):
Knockout-Code:
Dadurch wird der Code im Debugger anhalten und
element
undvalueAccessor()
wird wertvolle Informationen enthalten.quelle
Wenn Sie in Visual Studio und IE entwickeln, gefällt mir das besser.
data-bind="somebinding:(function(){debugger; return bindvalue; })()"
Ich mag es mehr als die Echo-Funktion, da es zum Skript mit allen Bindungen und nicht zur Eval-Datei geht und Sie sich nur die $ context $ -Daten ansehen können (die ich verwende) dies auch in Chrome);quelle
Das funktioniert bei mir:
quelle