Sigo teniendo problemas con los problemas de depuración en las plantillas KnockoutJS.

Digamos que quiero vincularme a una propiedad llamada " items" pero en la plantilla hago un error tipográfico y me vinculo a la propiedad (no existente) " item".

Usar el depurador de Chrome solo me dice:

"item" is not defined.

¿Existen herramientas, técnicas o estilos de codificación que me ayuden a obtener más información sobre el problema del enlace?

Una cosa que hago con bastante frecuencia cuando hay un problema con los datos disponibles en un determinado alcance es reemplazar la plantilla / sección con algo como:

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

O, si quieres una versión un poco más legible:

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

Esto escupirá los datos que se están vinculando en ese ámbito y le permitirá asegurarse de que está anidando las cosas adecuadamente.

Actualización: a partir de KO 2.1 , puede simplificarlo a:

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

Ahora los argumentos pasan a JSON.stringify.

Si está utilizando Chrome para el desarrollo, hay una extensión realmente excelente (con la que no estoy afiliado) llamada depurador de contexto de Knockoutjs que le muestra el contexto vinculante directamente en el panel Elementos de las Herramientas para desarrolladores.

Defina un enlaceHandler una vez , en algún lugar de sus archivos de biblioteca de JavaScript.

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

que simplemente usarlo le gusta esto:

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

Ventajas

• Use toda la potencia del depurador de Chrome, como Reveal en Elements Panel
• No tiene que agregar elementos personalizados a su DOM, solo para depurar

Encontré otro que puede ser útil. Estaba depurando algunos enlaces e intenté usar el ejemplo de Ryans. Recibí un error de que JSON encontró un bucle 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>

Pero, utilizando este enfoque, se reemplazó el valor de enlace de datos con lo siguiente:

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

Ahora, si hago clic en el elemento PRE mientras tengo abierta la ventana de depuración de Chrome, obtengo una ventana de variables de alcance muy bien llena.

Encontré una forma un poco mejor para ello:

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

Guía paso por paso

1. Para esta guía, utilizaremos uno de los ejemplos oficiales de KnockoutJS .
2. Digamos que desea ver los datos detrás del segundo contacto (Sensei Miyagi).
3. Haga clic derecho en el primer cuadro de entrada del segundo contacto (el que tiene el texto 'Sensei').
4. Seleccione 'Inspeccionar elemento'. Se abrirá la Barra de herramientas para desarrolladores de Chrome.
5. Abra la ventana de la consola de JavaScript. Puede acceder a la consola haciendo clic en el >=icono en la parte inferior izquierda de la barra de herramientas del desarrollador de Chrome, o abriendo la pestaña "Consola" en la barra de herramientas del desarrollador de Chrome, o presionando Ctrl+ Shift+J
6. Escriba el siguiente comando y presione Entrar: ko.dataFor($0)
7. Ahora debería ver los datos vinculados a la segunda fila. Puede expandir los datos presionando el pequeño triángulo a la izquierda del Objeto para navegar por el árbol de objetos.
8. Escriba el siguiente comando y presione Entrar: ko.contextFor($0)
9. Ahora debería ver un objeto complejo que contiene todo el contexto de Knockout, incluida la raíz y todos los padres. Esto es útil cuando está escribiendo expresiones de enlace complejas y desea experimentar con diferentes construcciones.

¿Qué es esta magia negra?

Este truco es una combinación de la función $ 0- $ 4 de Chrome y los métodos de utilidad de KnockoutJS . En resumen, Chrome recuerda que los elementos que ha seleccionado en la barra de herramientas para desarrolladores de Chrome y expone estos elementos bajo el alias $0, $1, $2, $3, $4. Por lo tanto, cuando hace clic con el botón derecho en un elemento de su navegador y selecciona 'Inspeccionar elemento', este elemento estará disponible automáticamente bajo el alias $0. Puedes usar este truco con KnockoutJS, AngularJS, jQuery o cualquier otro marco de JavaScript.

El otro lado del truco son los métodos de utilidad de KnockoutJS ko.dataFor y ko.contextFor:

• ko.dataFor(element) - devuelve los datos que estaban disponibles para el enlace contra el elemento
• ko.contextFor(element) - devuelve todo el contexto de enlace que estaba disponible para el elemento DOM.

Recuerde, la Consola JavaScript de Chrome es un entorno de tiempo de ejecución de JavaScript totalmente funcional. Esto significa que no está limitado a solo mirar las variables. Puede almacenar la salida ko.contextFory manipular el modelo de vista directamente desde la consola. Intenta var root = ko.contextFor($0).$root; root.addContact();ver qué pasa :-)

¡Feliz depuración!

Mira una cosa muy simple que uso:

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

O

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

Luego, en html, digamos que tenías:

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

Solo reemplácelo con

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

Más avanzado:

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

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

Disfruta :)

ACTUALIZAR

Otra cosa molesta es cuando intenta vincular a un valor indefinido. Imagine en el ejemplo anterior que el objeto de datos es simplemente {} no {valor: 'algún texto'}. En este caso, tendrás problemas, pero con el siguiente ajuste estarás bien:

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

Creé un proyecto github llamado knockthrough.js para ayudar a visualizar estos errores.

https://github.com/JonKragh/knockthrough

Destaca los errores de enlace y proporciona un volcado del contexto de datos en ese nodo.

Puedes jugar con una muestra aquí: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

Gracias a RP Niemeyer por sus excelentes ejemplos de código Knockout en SO para llevarme a este punto.

La forma más fácil de ver qué datos se pasan al enlace es soltar los datos en la consola:

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

Knockout evaluará el valor para el enlace de texto (de hecho, cualquier enlace puede usarse aquí ) y vacía $ data al panel del navegador de la consola.

Todas las otras respuestas funcionarán muy bien, solo estoy agregando lo que me gusta hacer:

En su vista (suponiendo que ya haya vinculado un ViewModel):

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

Código de eliminación:

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

Esto detendrá el código en el depurador elementy valueAccessor()contendrá información valiosa.

Si está desarrollando en Visual Studio e IE, me gusta más, data-bind="somebinding:(function(){debugger; return bindvalue; })()"me gusta más que la función echo, ya que irá al script con todos los enlaces en lugar del archivo eval y puede mirar los datos $ context $ (uso esto en Chrome también);

Esto funciona para mi:

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