У меня постоянно возникают проблемы с отладкой в шаблонах KnockoutJS.
Скажем, я хочу привязать к свойству под названием " items", но в шаблоне я делаю опечатку и привязываю к (несуществующему) свойству " item".
Использование отладчика Chrome только говорит мне:
"item" is not defined.
Существуют ли инструменты, методы или стили кодирования, которые помогают мне получить больше информации о проблеме связывания?
Ответы:
Одна вещь, которую я делаю довольно часто, когда возникает проблема с тем, какие данные доступны в определенной области, - это заменить шаблон / раздел чем-то вроде:
<div data-bind="text: ko.toJSON($data)"></div>Или, если вы хотите немного более читаемую версию:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>Это будет выплевывать данные, которые связаны в этой области и позволит вам убедиться, что вы вкладываете вещи соответствующим образом.
Обновление: начиная с KO 2.1 , вы можете упростить его до:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>Теперь аргументы переданы JSON.stringify.
nameможно наблюдатьname.subscribe(function(newValue) { console.log("name", newValue); });
foreachсценарии, и мне легче видеть их на странице в соответствующей визуализированной разметке, чем просеивать через консоль. Просто зависит от ситуации. Еще несколько моих мыслей здесь: knockmeout.net/2013/06/… . Кроме того, вы можете записать «чистую» версию в вашей привязке, как console.log(ko.toJS(valueAccessor()).
Если вы используете Chrome для разработки, есть действительно отличное расширение (с которым я не связан), называемое Knockoutjs context debugger, которое показывает вам контекст привязки непосредственно на панели элементов Developer Tools.
Определите bindingHandler один раз , где-нибудь в ваших файлах библиотеки JavaScript.
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};чем просто использовать это нравится это:
<ul data-bind="debug: $data">преимущества
Я нашел другой, который может быть полезным. Я отлаживал некоторые привязки и пытался использовать пример Райана. Я получил ошибку, что JSON обнаружил круговой цикл.
<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>Но, используя этот подход, заменили значение привязки данных следующим:
<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>Теперь, если я нажимаю на элемент PRE, когда открыто окно отладки Chrome, я получаю хорошо заполненное окно переменных области видимости.
Нашел немного лучший способ для этого:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=значок в нижнем левом углу панели инструментов разработчика Chrome, или открыв вкладку «Консоль» на панели инструментов разработчика Chrome, или нажав Ctrl+ Shift+Jko.dataFor($0)ko.contextFor($0)
Этот трюк представляет собой сочетание функции $ 0-4 $ в Chrome и служебных методов KnockoutJS . Короче говоря, Chrome запоминает , какие элементы вы выбрали в Chrome Developer Toolbar и выставляет эти элементы под псевдонимом $0, $1, $2, $3, $4. Поэтому, когда вы щелкаете правой кнопкой мыши по элементу в вашем браузере и выбираете «Проверить элемент», этот элемент автоматически становится доступным под псевдонимом $0. Вы можете использовать этот трюк с KnockoutJS, AngularJS, jQuery или любым другим фреймворком JavaScript.
Другая сторона хитрости - это служебные методы KnockoutJS ko.dataFor и ko.contextFor:
ko.dataFor(element) - возвращает данные, которые были доступны для привязки к элементуko.contextFor(element) - возвращает весь контекст привязки, который был доступен элементу DOM.Помните, JavaScript-консоль Chrome - это полнофункциональная среда выполнения JavaScript. Это означает, что вы не ограничены только просмотром переменных. Вы можете сохранить выходные данные ko.contextForи манипулировать моделью представления непосредственно из консоли. Попробуй var root = ko.contextFor($0).$root; root.addContact();и посмотри, что получится :-)
Удачной отладки!
Проверьте действительно простую вещь, которую я использую:
function echo(whatever) { debugger; return whatever; }Или
function echo(whatever) { console.log(whatever); return whatever; }Тогда в HTML, скажем, у вас было:
<div data-bind="text: value"></div>Просто замените его на
<div data-bind="text: echo(value)"></div>Более продвинутый:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>Наслаждаться :)
ОБНОВИТЬ
Еще одна неприятная вещь, когда вы пытаетесь связать с неопределенным значением. Представьте, что в приведенном выше примере объект данных просто {}, а не {value: 'some text'}. В этом случае у вас будут проблемы, но со следующей настройкой у вас все будет хорошо:
<div data-bind="text: $data['value']"></div> Я создал проект github под названием knockthrough.js, чтобы помочь визуализировать эти ошибки.
https://github.com/JonKragh/knockthrough
Он выделяет ошибки привязки и дает дамп текстового контекста на этом узле.
Вы можете поиграть с образцом здесь: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
Благодарю Р.П. Нимейера за его превосходные примеры кода Knockout на SO, чтобы донести до меня этот момент.
Самый простой способ увидеть, какие данные передаются в привязку, - это сбросить данные в консоль:
<div data-bind="text: console.log($data)"></div>Knockout оценивает значение для привязки текста ( здесь можно использовать любую привязку ) и сбрасывает $ data на панель браузера консоли.
Все остальные ответы будут работать отлично, я просто добавляю, что мне нравится делать:
По вашему мнению (если вы уже связали ViewModel):
<div data-bind="debugger: $data"></div>Код нокаута:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}Это приостановит код в отладчике elementи valueAccessor()будет содержать ценную информацию.
Если вы разрабатываете в Visual studio и IE, мне это нравится больше, data-bind="somebinding:(function(){debugger; return bindvalue; })()"мне нравится больше, чем функция echo, так как он будет идти к сценарию со всеми привязками, а не к файлу eval, и вы можете просто посмотреть на $ context $ data (я использую это и в Chrome);