Kommentar foreach vs foreach Bindung in knockoutjs

Question

In meinem HTML-Bindung kann ich diese Knockout foreach Bindungen definieren:

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

vs

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

Wo liegen die Unterschiede zwischen diesen beiden Ansätzen?

Answer 1

Verwendung nativer verbindlich, wenn eine Eltern-Kind-Beziehung existiert innerhalb des Bindungsabschnittes, wie ein ul und li basiert.

Verwenden Sie die Kommentarsyntax für die containerlose Bindung, wenn Ihr Bindungsabschnitt keine Eltern-Kind-Beziehung hat.

In Ihrem Beispiel verwenden Sie den ersten Codeblock, weil Sie nicht versuchen, an eine Eltern-Kind-Struktur zu binden. Alles, was Sie tun möchten, ist nur binden Sie Ihre Kundendaten an ein div, Sie sollten nicht über die Kunden ein Elternteil div und foreach erstellen und ein weiteres div innerhalb der Eltern div. Es ist mehr als Sie wollen.

Gute Verwendung von behälterlosen Bindung

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

Wenn Sie jedoch eine geordnete Liste haben, sollten Sie die nativen Bindung verwenden, weil es einfach Sinn macht.

india

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

behälter

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

Das zweite Beispiel sieht einfach albern. Sie fügen mehr Komplexität für etwas hinzu, das nicht kompliziert sein sollte.

Answer 2

In einigen Fällen möchten Sie vielleicht einen Abschnitt von Markup duplizieren, aber Sie haben kein Containerelement, auf dem ein foreach setzen Bindung

Um dies zu umgehen, können Sie die behälterlose Steuerfluss Syntax , die auf Kommentar-Tags

Modus Details zu The "foreach" binding, Note 4: Using foreach without a container element