Comment déboguer les erreurs de liaison de modèle pour KnockoutJS?

J’ai toujours des problèmes avec les problèmes de débogage dans les modèles KnockoutJS.

Disons que je veux lier une propriété appelée ” items ” mais que dans le template je fais une faute de frappe et que je lie la propriété ” item ” (non existante).

L’utilisation du débogueur Chrome ne me dit que:

"item" is not defined.

Existe-t-il des outils, des techniques ou des styles de codage qui m’aident à obtenir plus d’informations sur le problème de la liaison?

Une chose que je fais souvent quand il y a un problème avec les données disponibles dans une certaine mesure est de remplacer le modèle / la section par quelque chose comme:

 

Ou, si vous voulez une version légèrement plus lisible:

 

Cela va recracher les données liées à ce périmètre et vous permettre de vous assurer que vous nichez correctement les données.

Mise à jour: à partir de KO 2.1 , vous pouvez le simplifier pour:

 

Les arguments sont maintenant transmis à JSON.ssortingngify .

Si vous utilisez Chrome pour le développement, il existe une très bonne extension (avec laquelle je ne suis pas affilié) appelée le débogueur de contexte Knockoutjs qui affiche le contexte de liaison directement dans le panneau Eléments de Developer Tools.

Définissez un bindHandler une fois , quelque part dans vos fichiers de bibliothèque JavaScript.

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

que simplement l’utiliser comme ceci:

 

    Avantages

    • Utiliser toute la puissance du débogueur Chrome, comme Reveal in Elements Panel
    • Vous n’avez pas besoin d’append des éléments personnalisés à votre DOM, juste pour le débogage

    entrer la description de l'image ici

    J’ai trouvé un autre qui peut être utile. Je déboguais certaines liaisons et essayais d’utiliser l’exemple de Ryans. J’ai eu une erreur que JSON a trouvé une boucle circulaire.

     
    • 
      

    Mais, en utilisant cette approche, la valeur de liaison de données a été remplacée par ce qui suit:

      
    • 
      

    Maintenant, si je clique sur l’élément PRE tout en ayant la fenêtre de débogage chromée ouverte, j’obtiens une fenêtre de variables d’étendue bien remplie.

    Trouvé un peu mieux pour cela:

     
    
    

    Guide pas à pas

    1. Pour ce guide, nous utiliserons l’un des exemples officiels KnockoutJS .
    2. Disons que vous voulez voir les données derrière le deuxième contact (Sensei Miyagi).
    3. Cliquez avec le bouton droit de la souris sur la première zone de saisie du deuxième contact (celle contenant le texte ‘Sensei’).
    4. Sélectionnez “Inspecter l’élément”. La barre d’outils Chrome Developer s’ouvre.
    5. Ouvrez la fenêtre de la console JavaScript. Vous pouvez accéder à la console en cliquant sur l’icône >= en bas à gauche de la barre d’outils Chrome Developer ou en ouvrant l’onglet “Console” dans la barre d’outils Chrome Developer ou en appuyant sur Ctrl + Maj + J
    6. Tapez la commande suivante et appuyez sur Entrée: ko.dataFor($0)
    7. Vous devriez maintenant voir les données liées à la deuxième ligne. Vous pouvez développer les données en appuyant sur le petit sortingangle à gauche de l’object pour naviguer dans l’arborescence des objects.
    8. Tapez la commande suivante et appuyez sur Entrée: ko.contextFor($0)
    9. Vous devriez maintenant voir un object complexe qui contient l’intégralité du contexte Knockout, y compris la racine et tous les parents. Ceci est utile lorsque vous écrivez des expressions de liaison complexes et que vous souhaitez expérimenter différentes constructions.

    Exemple de sortie lorsque vous suivez le guide ci-dessus

    Quelle est cette magie noire?

    Cette astuce est une combinaison de la fonctionnalité $ 0- $ 4 de Chrome et des méthodes utilitaires de KnockoutJS . En résumé, Chrome se souvient des éléments que vous avez sélectionnés dans la barre d’outils Chrome Developer et expose ces éléments sous l’alias $0 , $1 , $2 , $3 , $4 . Ainsi, lorsque vous cliquez avec le bouton droit sur un élément de votre navigateur et sélectionnez «Inspecter l’élément», cet élément devient automatiquement disponible sous l’alias $0 . Vous pouvez utiliser cette astuce avec KnockoutJS, AngularJS, jQuery ou tout autre framework JavaScript.

    Les méthodes utilitaires de KnockoutJS, ko.dataFor et ko.contextFor, sont également utiles:

    • ko.dataFor(element) – Retourne les données disponibles pour la liaison avec l’élément
    • ko.contextFor(element) – Retourne l’intégralité du contexte de liaison disponible pour l’élément DOM.

    N’oubliez pas que la console JavaScript de Chrome est un environnement d’exécution JavaScript entièrement fonctionnel. Cela signifie que vous n’êtes pas limité à regarder des variables. Vous pouvez stocker la sortie de ko.contextFor et manipuler le modèle de vue directement depuis la console. Essayez var root = ko.contextFor($0).$root; root.addContact(); var root = ko.contextFor($0).$root; root.addContact(); et voir ce qui se passe 🙂

    Bon débogage!

    Découvrez une chose très simple que j’utilise:

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

    Ou

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

    Ensuite, en html, disons, vous aviez:

     

    Il suffit de le remplacer par

     

    Plus avancé:

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

    Prendre plaisir 🙂

    METTRE À JOUR

    Une autre chose ennuyeuse est lorsque vous essayez de vous lier à une valeur indéfinie. Imaginez dans l’exemple ci-dessus que l’object de données est juste {} not {value: ‘some text’}. Dans ce cas, vous aurez des problèmes, mais avec le tweak suivant, tout ira bien:

     

    J’ai créé un projet github appelé knockthrough.js pour aider à visualiser ces erreurs.

    https://github.com/JonKragh/knockthrough

    Il met en évidence les erreurs de liaison et fournit un vidage du contexte de données sur ce noeud.

    Vous pouvez jouer avec un exemple ici: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

    entrer la description de l'image ici

    Nous remercions RP Niemeyer pour ses excellents exemples de code Knockout sur SO pour me faire parvenir ce point.

    La manière la plus simple de voir quelles données sont transmises à la liaison consiste à supprimer les données sur la console:

     

    Knockout évaluera la valeur de la liaison de texte ( toute liaison peut être utilisée ici en fait ) et vide les données $ du panneau de navigation de la console.

    Si vous développez en Visual Studio et IE, cela me plait plus data-bind="somebinding:(function(){debugger; return bindvalue; })()" J’aime plus que la fonction écho car elle ira au script avec toutes les liaisons plutôt que le fichier eval et vous pouvez simplement regarder le $ context $ data (je l’utilise aussi dans Chrome);

    Toutes les autres réponses fonctionneront bien, j’ajoute juste ce que j’aime faire:

    Dans votre vue (en supposant que vous avez déjà lié un ViewModel):

     

    Code KO:

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

    Cela mettra le code en pause dans le débogueur, et element et valueAccessor() contiendront des informations précieuses.