knockout.js
Depurando una aplicación knockout.js

Comprobando el contexto de enlace de un elemento DOM

Muchos errores en los enlaces de datos knockout son causados ​​por propiedades indefinidas en un modelo de vista. Knockout tiene dos métodos prácticos para recuperar el contexto de enlace de un elemento HTML:

// Returns the binding context to which an HTMLElement is bound
ko.contextFor(element);    

// Returns the viewmodel to which an HTMLElement is bound
// similar to: ko.contextFor(element).$data
ko.dataFor(element);       

Para descubrir rápidamente el contexto de enlace de un elemento de UI, aquí hay un truco práctico:

La mayoría de los navegadores modernos almacenan el elemento DOM seleccionado actualmente en una variable global: $0 ( más sobre este mecanismo )

• Haga clic derecho en un elemento de su interfaz de usuario y elija "inspeccionar" o "inspeccionar elemento" en el menú contextual.
• escriba ko.dataFor($0) en la consola del desarrollador y presione enter

También existen complementos de navegador que pueden ayudar a encontrar el contexto del objeto.

Un ejemplo (pruébalo en el ejemplo de Knockout hello world ):

Imprimir un contexto de enlace desde el marcado

A veces es útil imprimir un enlace actual directamente desde el marcado. Un buen truco que permite usar un elemento DOM adicional con un enlace no existente (KO <3.0), un enlace personalizado o un enlace que no es relevante, como uniqueName .

Considera este ejemplo:

<tbody data-bind="foreach: people">
    <tr>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
    </tr>
</tbody>

Si a uno le gustaría averiguar el contexto de enlace de cada elemento en la matriz de personas, puede escribir:

<tbody data-bind="foreach: people">
    <span data-bind="uniqueName: console.log($data)"></span>
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>