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

Question

Je continue d’avoir mal avec des problèmes de débogage dans les modèles de KnockoutJS.

Je veux lier à une propriété appelée " « mais dans le modèle, j’ai fait une faute de frappe et lier à la propriété (non existante) » «.

L’utilisation du débogueur de Chrome me dit seulement :

``

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

Answer 1

Une chose que je fais assez souvent quand il y a un problème avec les données disponibles sur un certain champ d'application est de remplacer le modèle/article avec quelque chose comme:

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

Ou, si vous voulez un peu plus lisible version:

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

Cela générera des données qui est lié à ce champ d'application et laissez-vous assurez-vous que vous êtes à la nidification des choses de façon appropriée.

Mise à jour: comme de KO 2.1, vous pouvez simplifier:

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

Maintenant, les arguments sont passés sur d' JSON.stringify.

Answer 2

Si vous utilisez Chrome pour le développement, il y a une extension vraiment génial (avec lequel je ne suis pas affilié) appelée Knockoutjs débogueur de contexte qui vous présente le contexte de liaison directement dans le panneau Eléments des outils du développeur.

Answer 3

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

qu’il suffit d’utiliser elle aime ça :

Avantages

• Utiliser la pleine puissance du débogueur Chrome, comme révélé dans panneau Eléments
• Vous n’avez pas à ajouter des éléments personnalisés à votre DOM, juste pour le débogage

Answer 4

J'ai trouvé un autre qui peut être utile. J'ai été le débogage de certaines liaisons et essayé d'utiliser Ryans exemple. J'ai une erreur que JSON trouvé une circulaire de la boucle.

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

Mais, l'utilisation de cette approche a remplacé les données-valeur de liaison avec les éléments suivants:

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

Maintenant, si je clique sur le PRÉ élément, tout en ayant le chrome fenêtre de débogage, ma bien rempli portée des variables de la fenêtre.

Trouvé un peu mieux:

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

Answer 5

Découvrez un très simple que j'utilise:

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

Ou

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

Puis, en html, dis, tu avais:

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

Il suffit de remplacer avec

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

Plus avancé:

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

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

Enjoy :)

Mise à JOUR

Un autre gênant, c'est quand vous êtes à essayer de se lier à une valeur non définie. Imaginez dans l'exemple ci-dessus que l'objet de données est juste {} pas { value: 'texte' }. Dans ce cas, vous serez en difficulté, mais avec la suite de tweak, vous serez bien:

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