knockout.js
Déboguer une application knockout.js

Vérification du contexte de liaison d'un élément DOM

De nombreux bogues dans les liaisons de données à exclure sont causés par des propriétés non définies dans un modèle de vue. Knockout a deux méthodes pratiques pour récupérer le contexte de liaison d'un élément 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);       

Pour trouver rapidement le contexte de liaison d'un élément d'interface utilisateur, voici une astuce pratique:

La plupart des navigateurs modernes stockent l'élément DOM actuellement sélectionné dans une variable globale: $0 ( plus sur ce mécanisme )

• Cliquez avec le bouton droit sur un élément de votre interface utilisateur et choisissez "inspecter" ou "inspecter l'élément" dans le menu contextuel.
• tapez ko.dataFor($0) dans la console du développeur et appuyez sur Entrée

Il existe également des plug-ins de navigateur qui peuvent aider à trouver le contexte de l'objet.

Un exemple (essayez-le sur Knockout hello world exemple ):

Impression d'un contexte de liaison à partir du balisage

Parfois, il est utile d'imprimer une liaison en cours directement à partir du balisage. Une astuce qui permet d'utiliser un élément DOM supplémentaire avec une liaison non existante (KO <3.0), une liaison personnalisée ou une liaison non pertinente telle que uniqueName .

Considérez cet exemple:

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

Si l'on veut connaître le contexte de liaison de chaque élément du tableau de personnes, on peut écrire:

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