knockout.js
Debug di un'applicazione knockout.js

Verifica del contesto di associazione di un elemento DOM

Molti bug nei legami dei dati knockout sono causati da proprietà non definite in un modello viewmodel. Knockout ha due metodi pratici per recuperare il contesto di bind di 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);       

Per scoprire rapidamente il contesto vincolante di un elemento dell'interfaccia utente, ecco un utile trucco:

La maggior parte dei browser moderni memorizza l'elemento DOM attualmente selezionato in una variabile globale: $0 ( maggiori informazioni su questo meccanismo )

• Fai clic con il pulsante destro del mouse su un elemento nell'interfaccia utente e scegli "inspect" o "inspect element" nel menu di scelta rapida.
• digita ko.dataFor($0) nella console degli sviluppatori e premi ko.dataFor($0)

Esistono anche plug-in del browser che possono aiutare a trovare il contesto dell'oggetto.

Un esempio (provalo su esempio ciao mondo Knockout ):

Stampa di un contesto vincolante dal markup

A volte è utile stampare un'associazione corrente direttamente dal markup. Un trucco accurato che consente di utilizzare un elemento DOM aggiuntivo con un binding non esistente (KO <3.0), un binding personalizzato o un'associazione che non è rilevante come uniqueName .

Considera questo esempio:

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

Se uno vorrebbe scoprire il contesto vincolante di ogni elemento nell'array di persone, si può scrivere:

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