Continuo tendo problemas com problemas de depuração nos modelos do KnockoutJS.

Digamos que eu queira vincular a uma propriedade chamada " items", mas no modelo eu digitei um erro de digitação e vinculei à propriedade (não existente) " item".

O uso do depurador do Chrome diz apenas:

"item" is not defined.

Existem ferramentas, técnicas ou estilos de codificação que me ajudam a obter mais informações sobre o problema de ligação?

Uma coisa que faço frequentemente quando há um problema com quais dados estão disponíveis em um determinado escopo é substituir o modelo / seção por algo como:

<div data-bind="text: ko.toJSON($data)"></div>

Ou, se você quiser uma versão um pouco mais legível:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

Isso cuspirá os dados que estão sendo vinculados nesse escopo e permitirá que você aninhe as coisas adequadamente.

Atualização: a partir do KO 2.1 , você pode simplificá-lo para:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Agora os argumentos são passados ​​para JSON.stringify.

Se você estiver usando o Chrome para desenvolvimento, há uma grande extensão (com a qual eu não sou afiliado) chamada depurador de contexto Knockoutjs que mostra o contexto de ligação diretamente no painel Elementos das Ferramentas do desenvolvedor.

Defina um bindingHandler uma vez , em algum lugar nos arquivos da biblioteca JavaScript.

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

do que simplesmente usá-lo assim:

<ul data-bind="debug: $data">

Vantagens

• Use toda a potência do depurador do Chrome, como Revelar no Painel de elementos
• Você não precisa adicionar elementos personalizados ao seu DOM, apenas para depuração

Encontrei outro que pode ser útil. Eu estava depurando algumas ligações e tentei usar o exemplo do Ryans. Eu recebi um erro que o JSON encontrou um loop circular.

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

Mas, usando essa abordagem, a substituiu o valor de ligação de dados pelo seguinte:

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

Agora, se eu clicar no elemento PRE enquanto a janela de depuração do Chrome estiver aberta, recebo uma janela de variáveis ​​de escopo bem preenchida.

Encontrei uma maneira um pouco melhor para isso:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

Guia passo a passo

1. Para este guia, usaremos um dos exemplos oficiais do KnockoutJS .
2. Digamos que você queira ver os dados por trás do segundo contato (Sensei Miyagi).
3. Clique com o botão direito do mouse na primeira caixa de entrada do segundo contato (aquele com o texto 'Sensei').
4. Selecione 'Inspecionar elemento'. A barra de ferramentas do desenvolvedor do Chrome será aberta.
5. Abra a janela do console do JavaScript. Você pode acessar o console clicando no >=ícone no canto inferior esquerdo da barra de ferramentas do desenvolvedor do Chrome ou abrindo a guia "Console" na barra de ferramentas do desenvolvedor do Chrome ou pressionando Ctrl+ Shift+J
6. Digite o seguinte comando e pressione Enter: ko.dataFor($0)
7. Agora você deve ver os dados que estão vinculados à segunda linha. Você pode expandir os dados pressionando o pequeno triângulo à esquerda do objeto para navegar na árvore de objetos.
8. Digite o seguinte comando e pressione Enter: ko.contextFor($0)
9. Agora você deve ver um objeto complexo que contém todo o contexto do Knockout, incluindo a raiz e todos os pais. Isso é útil quando você está escrevendo expressões de ligação complexas e deseja experimentar diferentes construções.

O que é essa magia negra?

Esse truque é uma combinação do recurso de US $ 0 a US $ 4 do Chrome e dos métodos utilitários do KnockoutJS . Em suma, o Chrome se lembra de quais elementos você tenha selecionado no Developer Chrome Toolbar e expõe esses elementos sob o pseudônimo $0, $1, $2, $3, $4. Portanto, quando você clica com o botão direito do mouse em um elemento do navegador e seleciona 'Inspecionar elemento', esse elemento fica automaticamente disponível sob o alias$0 . Você pode usar esse truque com KnockoutJS, AngularJS, jQuery ou qualquer outra estrutura JavaScript.

O outro lado do truque são os métodos utilitários do KnockoutJS, ko.dataFor e ko.contextFor:

• ko.dataFor(element) - retorna os dados que estavam disponíveis para ligação com o elemento
• ko.contextFor(element) - retorna todo o contexto de ligação que estava disponível para o elemento DOM.

Lembre-se, o JavaScript Console do Chrome é um ambiente de tempo de execução JavaScript totalmente funcional. Isso significa que você não está limitado apenas a olhar para variáveis. Você pode armazenar a saída ko.contextFore manipular o viewmodel diretamente do console. Experimentarvar root = ko.contextFor($0).$root; root.addContact(); e veja o que acontece :-)

Feliz depuração!

Confira uma coisa realmente simples que eu uso:

function echo(whatever) { debugger; return whatever; }

Ou

function echo(whatever) { console.log(whatever); return whatever; }

Então, em html, digamos, você tinha:

<div data-bind="text: value"></div>

Apenas substitua-o por

<div data-bind="text: echo(value)"></div>

Mais avancado:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

Aproveitar :)

ATUALIZAR

Outra coisa irritante é quando você está tentando vincular a um valor indefinido. Imagine no exemplo acima que o objeto de dados é apenas {} não {value: 'some text'}. Nesse caso, você estará com problemas, mas com o seguinte ajuste você estará bem:

<div data-bind="text: $data['value']"></div> 

Criei um projeto no github chamado knockthrough.js para ajudar a visualizar esses erros.

https://github.com/JonKragh/knockthrough

Ele destaca erros de ligação e fornece um dump do datacontext nesse nó.

Você pode jogar com uma amostra aqui: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

Os nossos agradecimentos a RP Niemeyer por suas excelentes amostras de códigos Knockout no SO para me levar a esse ponto.

A maneira mais fácil de ver quais dados são passados ​​para a ligação é soltá-los no console:

<div data-bind="text: console.log($data)"></div>

O knockout avaliará o valor da ligação de texto ( qualquer ligação pode ser usada aqui de fato ) e libera $ data no painel do navegador do console.

Todas as outras respostas funcionarão muito bem, estou apenas adicionando o que gosto de fazer:

Na sua opinião (supondo que você já tenha vinculado um ViewModel):

<div data-bind="debugger: $data"></div>

Código de nocaute:

ko.bindingHandlers.debugger = {
    init: function (element, valueAccessor) {
        debugger;
    }
}

Isso fará uma pausa no código no depurador elemente valueAccessor()conterá informações valiosas.

Se você está desenvolvendo no Visual studio e no IE, eu gosto mais data-bind="somebinding:(function(){debugger; return bindvalue; })()"disso, mais a função echo, pois ele irá para o script com todas as ligações, e não o arquivo eval, e você pode apenas olhar para os dados $ context $ (eu uso isso também no Chrome);

Isso funciona para mim:

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