knockout.js
Отладка приложения knockout.js

Проверка контекста привязки элемента DOM

Многие ошибки в привязке данных к нокауту вызваны неопределенными свойствами в режиме просмотра. У нокаута есть два удобных метода для извлечения контекста привязки элемента 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);       

Чтобы быстро узнать контекст привязки элемента пользовательского интерфейса, вот удобный прием:

Большинство современных браузеров сохраняют текущий выбранный элемент DOM в глобальной переменной: $0 ( подробнее об этом механизме )

• Щелкните правой кнопкой мыши элемент в пользовательском интерфейсе и выберите «проверить» или «проверить элемент» в контекстном меню.
• введите ko.dataFor($0) в консоли разработчика и нажмите enter

Также существуют плагины браузера, которые могут помочь в поиске контекста объекта.

Пример (попробуйте его на примере «Hello Knightout Hello» ):

Печать контекста привязки из разметки

Иногда полезно печатать текущую привязку непосредственно из разметки. Яркий трюк, который позволяет использовать дополнительный элемент DOM с несуществующей привязкой (KO <3.0), настраиваемую привязку или привязку, которая не имеет значения, например uniqueName .

Рассмотрим этот пример:

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

Если вы хотите узнать контекст привязки каждого элемента в массиве people, можно написать:

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