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?

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.

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

• Wykorzystaj pełną moc debugera Chrome, np Ujawnij w panelu elementów
• Nie musisz dodawać niestandardowych elementów do DOM, tylko w celu debugowania

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>

Przewodnik krok po kroku

1. W tym przewodniku wykorzystamy jeden z oficjalnych przykładów KnockoutJS .
2. Powiedz, że chcesz zobaczyć dane za drugim kontaktem (Sensei Miyagi).
3. Kliknij prawym przyciskiem myszy pierwsze pole wprowadzania drugiego kontaktu (ten z tekstem „Sensei”).
4. Wybierz „Sprawdź element”. Otworzy się pasek narzędzi Chrome dla programistów.
5. Otwórz okno konsoli JavaScript. Aby uzyskać dostęp do konsoli, kliknij >=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 +J
6. Wpisz następujące polecenie i naciśnij klawisz Enter: ko.dataFor($0)
7. Powinieneś teraz zobaczyć dane powiązane z drugim rzędem. Możesz rozwinąć dane, naciskając mały trójkąt po lewej stronie obiektu, aby poruszać się po drzewie obiektów.
8. Wpisz następujące polecenie i naciśnij klawisz Enter: ko.contextFor($0)
9. Powinieneś teraz zobaczyć złożony obiekt, który zawiera cały kontekst Knockout, w tym root i wszystkich rodziców. Jest to przydatne, gdy piszesz złożone wyrażenia wiążące i chcesz eksperymentować z różnymi konstrukcjami.

Czym jest ta czarna magia?

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 elementem
• ko.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);

To działa dla mnie:

<div data-bind="text: function(){ debugger; }()"></div>