Knockout.js sans conteneur "foreach" ne fonctionne pas avec <table>

Question

Ce code renvoie l'erreur (dans Chrome): "Impossible de trouver la balise de commentaire de fermeture correspondant: ko foreach: MyPlans":

<table>
  <!-- ko foreach: MyPlans -->
    <tr>
      <td>Test</td>
    </tr>
  <!-- /ko -->
</table>

Si j'utilise une liste à la place, tout fonctionne:

<ul>
  <!-- ko foreach: MyPlans -->
    <li>
      Test
    </li>
  <!-- /ko -->
</ul>

Je voudrais utiliser le foreach sans conteneur avec une table. Y a-t-il quelque chose que je fais mal? Est-ce un bug?

Answer 1

Cela est lié au fait que les navigateurs insèrent automatiquement les balises tbody, ce qui crée une incompatibilité dans les commentaires. La sortie rendue ressemblera à:

<table>
  <!-- ko foreach: MyPlans -->
  <tbody>
    <tr>
      <td>Test</td>
    </tr>
  <!-- /ko -->
  </tbody>
</table>

Steve a travaillé pour corriger les balises incompatibles dans KO, mais la chose la plus simple à faire est d'ajouter le tbody vous-même ou d'ajouter le tbody et d'y mettre votre liaison.

<table>
  <tbody data-bind="foreach: MyPlans">
    <tr>
      <td>Test</td>
    </tr>
  </tbody>
</table>

Il est légal qu'une table ait plusieurs balises tbody, si nécessaire.