У меня постоянно возникают проблемы с отладкой в ​​шаблонах 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.

Если вы используете 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">

преимущества

• Используйте всю мощь отладчика Chrome, например, « Показать на панели элементов».
• Вам не нужно добавлять пользовательские элементы в DOM, просто для отладки

Я нашел другой, который может быть полезным. Я отлаживал некоторые привязки и пытался использовать пример Райана. Я получил ошибку, что 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>

Пошаговое руководство

1. Для этого руководства мы будем использовать один из официальных примеров KnockoutJS .
2. Скажем, вы хотите увидеть данные за вторым контактом (сэнсэй Мияги).
3. Щелкните правой кнопкой мыши первое поле ввода второго контакта (с текстом «Сенсей»).
4. Выберите «Проверить элемент». Откроется панель инструментов разработчика Chrome.
5. Откройте окно консоли JavaScript. Вы можете получить доступ к консоли, щелкнув >=значок в нижнем левом углу панели инструментов разработчика Chrome, или открыв вкладку «Консоль» на панели инструментов разработчика Chrome, или нажав Ctrl+ Shift+J
6. Введите следующую команду и нажмите Enter: ko.dataFor($0)
7. Теперь вы должны увидеть данные, привязанные ко второй строке. Вы можете расширить данные, нажав маленький треугольник слева от объекта, чтобы перемещаться по дереву объектов.
8. Введите следующую команду и нажмите Enter: ko.contextFor($0)
9. Теперь вы должны увидеть сложный объект, который содержит весь контекст Knockout, включая корень и всех родителей. Это полезно, когда вы пишете сложные выражения связывания и хотите поэкспериментировать с различными конструкциями.

Что это за черная магия?

Этот трюк представляет собой сочетание функции $ 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);

Это работает для меня:

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