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?
Respostas:
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.
nameé um observável fazendoname.subscribe(function(newValue) { console.log("name", newValue); });
foreachcenário, e acho mais fácil ver na página a marcação renderizada relevante do que vasculhar o console. Depende apenas da situação. Um pouco mais dos meus pensamentos aqui: knockmeout.net/2013/06// . Além disso, você pode querer registrar uma versão "limpa" em sua ligação como console.log(ko.toJS(valueAccessor()).
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
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>>=í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+Jko.dataFor($0)ko.contextFor($0)
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 elementoko.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);