web-dev-qa-db-fra.com

commentaire foreach binding vs foreach binding in knockoutjs

Dans mon HTML, je peux définir ces liaisons knockout foreach:

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

contre

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

Quelles sont les différences entre ces deux approches?

javascriptknockout.jstemplatingknockout-templating
51
Elisabeth

Utilisez la liaison native lorsqu'une relation parent-enfant existe dans la section de liaison, comme un ul et un li.

Utilisez la syntaxe de commentaire pour la liaison sans conteneur lorsque votre section de liaison n'a pas de relation parent-enfant.

Dans votre exemple, vous utilisez le premier bloc de code car vous n'essayez pas de vous lier à une structure parent-enfant. Tout ce que vous voulez faire est simplement de lier vos données client à un div, vous ne devriez pas avoir à créer un div parent et foreach via les clients et ajouter un autre div à l'intérieur du div parent. C'est plus que vous ne voulez faire.

Bonne utilisation de la reliure sans conteneur

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

Cependant, si vous avez un liste ordonnée vous devez utiliser le liaison native parce que cela a du sens.

Natif

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

Sans conteneur

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

Le deuxième exemple semble juste idiot. Vous ajoutez plus de complexité pour quelque chose qui ne devrait pas être compliqué.

64
David East

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

Pour gérer cela, vous pouvez utiliser la syntaxe de flux de contrôle sans conteneur, qui est basée sur des balises de commentaire

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

2
Claudio Redi