Wciąż mam problemy z debugowaniem problemów w szablonach KnockoutJS.
Powiedz, że chcę powiązać z właściwością o nazwie „ items”, ale w szablonie robię literówkę i wiążę się z (nieistniejącą) właściwością „ item”.
Korzystanie z debugera Chrome mówi mi tylko:
"item" is not defined.
Czy istnieją narzędzia, techniki lub style kodowania, które pomagają mi uzyskać więcej informacji na temat problemu z wiązaniem?
Odpowiedzi:
Jedną z rzeczy, które robię dość często, gdy występuje problem z tym, jakie dane są dostępne w pewnym zakresie, jest zastąpienie szablonu / sekcji czymś takim jak:
<div data-bind="text: ko.toJSON($data)"></div>Lub, jeśli chcesz nieco bardziej czytelną wersję:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>Spowoduje to wyplenienie danych powiązanych w tym zakresie i pozwoli upewnić się, że odpowiednio zagnieżdżasz rzeczy.
Aktualizacja: od KO 2.1 możesz uprościć to do:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>Teraz argumenty są przekazywane do JSON.stringify.
namemożna zaobserwowaćname.subscribe(function(newValue) { console.log("name", newValue); });
foreachscenariuszu, i łatwiej mi jest zobaczyć na stronie w obrębie odpowiedniego renderowanego znacznika niż przesuwać przez konsolę. Tylko zależy od sytuacji. Więcej moich przemyśleń tutaj: knockmeout.net/2013/06/… . Możesz również chcieć zalogować „czystą” wersję w swoim powiązaniu jak console.log(ko.toJS(valueAccessor()).
Jeśli używasz Chrome do programowania, istnieje naprawdę świetne rozszerzenie (z którym nie jestem powiązany) o nazwie Debugger kontekstowy Knockoutjs, który pokazuje kontekst wiązania bezpośrednio w panelu Elementy narzędzi programistycznych.
Zdefiniuj obiekt bindingHandler raz , gdzieś w plikach biblioteki JavaScript.
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};niż zwykłe użycie lubi to:
<ul data-bind="debug: $data">Zalety
Znalazłem inny, który może być pomocny. Debugowałem niektóre powiązania i próbowałem na przykładzie Ryans. Wystąpił błąd polegający na tym, że JSON znalazł okrągłą pętlę.
<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>Ale stosując to podejście zastąpiono wartość wiązania danych następującą:
<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>Teraz, jeśli kliknę element PRE, mając otwarte okno debugowania chrome, otrzymam ładnie wypełnione okno zmiennych zakresu.
Znalazłem trochę lepszy sposób:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=ikonę w lewym dolnym rogu paska narzędzi dla programistów Chrome lub otwierając kartę „Konsola” na pasku narzędzi dla programistów Chrome lub naciskając Ctrl+Shift +Jko.dataFor($0)ko.contextFor($0)
Ta sztuczka jest połączeniem funkcji Chrome 0–4 USD i metod użyteczności KnockoutJS . W skrócie, Chrome zapamiętuje, które elementy zostały wybrane w Chrome Developer Toolbar i eksponuje te elementy pod pseudonimem $0, $1, $2, $3, $4. Więc kiedy klikniesz prawym przyciskiem myszy element w przeglądarce i wybierzesz „Sprawdź element”, ten element automatycznie stanie się dostępny pod aliasem$0 . Możesz użyć tej sztuczki w KnockoutJS, AngularJS, jQuery lub w dowolnym innym języku JavaScript.
Drugą stroną sztuczki są metody narzędziowe KnockoutJS ko.dataFor i ko.contextFor:
ko.dataFor(element) - zwraca dane, które były dostępne do powiązania z elementemko.contextFor(element) - zwraca cały kontekst wiązania, który był dostępny dla elementu DOM.Pamiętaj, że konsola JavaScript Chrome to w pełni funkcjonalne środowisko wykonawcze JavaScript. Oznacza to, że nie jesteś ograniczony tylko do patrzenia na zmienne. Możesz przechowywać dane wyjściowe ko.contextFori manipulować viewmodelem bezpośrednio z konsoli. Spróbuj var root = ko.contextFor($0).$root; root.addContact();i zobacz, co się stanie :-)
Miłego debugowania!
Sprawdź naprawdę prostą rzecz, której używam:
function echo(whatever) { debugger; return whatever; }Lub
function echo(whatever) { console.log(whatever); return whatever; }Powiedzmy, że w html:
<div data-bind="text: value"></div>Po prostu zamień na
<div data-bind="text: echo(value)"></div>Bardziej zaawansowany:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>Cieszyć się :)
AKTUALIZACJA
Inną irytującą rzeczą jest próba powiązania z nieokreśloną wartością. Wyobraź sobie w powyższym przykładzie, że obiekt danych to po prostu {} nie {wartość: „jakiś tekst”}. W takim przypadku będziesz mieć kłopoty, ale z następującymi poprawkami będziesz w porządku:
<div data-bind="text: $data['value']"></div> Stworzyłem projekt github o nazwie knockthrough.js, aby pomóc w wizualizacji tych błędów.
https://github.com/JonKragh/knockthrough
Podkreśla błędy wiązania i zrzuca zrzut danych w tym węźle.
Możesz zagrać z próbką tutaj: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
Podziękowania dla RP Niemeyera za jego doskonałe próbki kodu Knockout na SO, które doprowadziły mnie do tego punktu.
Najłatwiejszym sposobem sprawdzenia, jakie dane są przekazywane do wiązania, jest upuszczenie danych na konsolę:
<div data-bind="text: console.log($data)"></div>Knockout oceni wartość wiązania tekstowego ( w rzeczywistości można tu użyć dowolnego powiązania ) i opróżni $ dane do panelu przeglądarki konsoli.
Wszystkie pozostałe odpowiedzi będą działać świetnie, dodam tylko to, co lubię:
W twoim widoku (zakładając, że już związałeś ViewModel):
<div data-bind="debugger: $data"></div>Kod nokaut:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}Spowoduje to wstrzymanie kodu w debuggerze elementi valueAccessor()będzie zawierać cenne informacje.
Jeśli rozwijasz się w Visual Studio i IE podoba mi się to bardziej data-bind="somebinding:(function(){debugger; return bindvalue; })()", bardziej podoba mi się to niż funkcja echa, ponieważ przejdzie ona do skryptu ze wszystkimi powiązaniami, a nie do pliku eval i możesz po prostu spojrzeć na dane $ kontekst $ (używam to także w Chrome);