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>