knockout.js
Debugowanie aplikacji knockout.js

Sprawdzanie kontekstu wiązania elementu DOM

Wiele błędów w powiązaniach z nokautem jest spowodowanych niezdefiniowanymi właściwościami w viewmodelu. Knockout ma dwie przydatne metody pobierania kontekstu wiązania elementu HTML:

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

Aby szybko znaleźć kontekst wiązania elementu interfejsu użytkownika, oto przydatna sztuczka:

Większość nowoczesnych przeglądarek przechowuje obecnie wybrany element DOM w zmiennej globalnej: $0 ( więcej o tym mechanizmie )

• Kliknij prawym przyciskiem myszy element w interfejsie użytkownika i wybierz polecenie „sprawdź” lub „sprawdź element” z menu kontekstowego.
• wpisz ko.dataFor($0) w konsoli programisty i naciśnij klawisz Enter

Istnieją również wtyczki do przeglądarek, które mogą pomóc w znalezieniu kontekstu obiektu.

Przykład (spróbuj na przykładzie Knockout hello world ):

Drukowanie kontekstu wiązania ze znaczników

Czasami przydatne jest wydrukowanie bieżącego powiązania bezpośrednio ze znaczników. Zgrabna sztuczka, która pozwala na użycie dodatkowego elementu DOM z nieistniejącym powiązaniem (KO <3.0), powiązaniem niestandardowym lub powiązaniem, które nie jest istotne, takie jak uniqueName .

Rozważ ten przykład:

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

Jeśli chcesz znaleźć kontekst wiążący każdego elementu w tablicy people, możesz napisać:

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