commentaire foreach binding vs foreach binding dans knockoutjs

Question

Dans mon code HTML, je peux définir ces liaisons knock-out foreach:

 <!-- ko foreach: customer -->
   <div data-bind="text: id" />
<!-- /ko -->
 

contre

 <div data-bind="foreach: customer">
    <div data-bind="text: id" />
</div>
 

Où sont les différences entre ces deux approches?

Answer 1

Natif de liaison lorsqu'une relation parent-enfant existe au sein de la section liaison, comme un ul et li.

L'utilisation de la syntaxe pour les commentaires pour containerless de liaison lors de votre liaison de la section ne dispose pas d'une relation parent-enfant.

Dans votre exemple, vous utilisez le premier bloc de code parce que vous n'êtes pas d'essayer de se lier à un parent-enfant de la structure. Tout ce que vous voulez faire est de lier les données de votre client à un div, vous ne devriez pas avoir à créer un div parent et foreach par les clients et de les ajouter une autre div à l'intérieur de la div parent. C'est plus que ce que vous voulez faire.

Bonne utilisation de containerless de liaison

<!-- ko foreach: customer -->
<section>
   <p data-bind="text: customer.name"></p>
   <p data-bind="text: customer.orderDate"></p>
</section>
<!-- /ko -->

Toutefois, si vous avez une liste ordonnée, vous devez utiliser les indigènes de liaison , car il est tout à fait logique.

Natif

<ol data-bind="foreach: customer">
   <li data-bind="text: customer.name"></li>
</ol>

Containerless

<ol> 
   <!-- ko foreach: customer -->
       <li data-bind="text: customer.name"></li>
   <!-- /ko -->
</ol>

Le deuxième exemple a juste l'air ridicule. Vous êtes en train d'ajouter plus de complexité pour quelque chose qui ne devrait pas être compliqué.

Answer 2

Dans certains cas, vous souhaiterez peut-être dupliquer une section de balisage, mais vous ne disposez d'aucun élément conteneur sur lequel mettre une liaison foreach.

Pour gérer cela, vous pouvez utiliser la syntaxe du flux de contrôle sans conteneur, basée sur les balises de commentaire.

Détails du mode dans la liaison "foreach", Note 4: Utilisation de foreach sans élément conteneur