skomentuj foreach binding vs foreach binding w knockoutjs

Question

skomentuj foreach binding vs foreach binding w knockoutjs

W moim HTML mogę zdefiniować te wiązania knockout foreach:

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

Vs

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

Gdzie są różnice między tymi dwoma podejściami?

47

javascript knockout.js templating knockout-templating

Author: David East, 2013-06-12

Source

2 answers

W niektórych przypadkach możesz chcieć powielić sekcję znaczników, ale nie masz żadnego elementu kontenera, na którym można umieścić Wiązanie foreach

Aby to zrobić, możesz użyć składni containerless control flow, która jest oparta na tagach comment

Szczegóły trybu na wiązaniu "foreach", Uwaga 4: Używanie foreach bez elementu kontenera

2

Author: Claudio Redi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-12 14:32:26

score 58 · Accepted Answer

Użyj wiązania natywnego, gdy relacja rodzic-dziecko istnieje w sekcji wiązania, jak ul i li.

Używaj składni komentarza do wiązania bez kontenerów, gdy sekcja wiązania nie ma relacji rodzic-dziecko.

W twoim przykładzie używasz pierwszego bloku kodu, ponieważ nie próbujesz powiązać struktury rodzic-dziecko. Wszystko, co chcesz zrobić, to po prostu powiązać dane Klienta z div, nie powinieneś tworzyć nadrzędnego div I foreach poprzez klientów i dodać inny div wewnątrz nadrzędnego div. To więcej niż chcesz zrobić.

Dobre wykorzystanie oprawy bez pojemnika

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

Jeśli jednak masz uporządkowaną listę powinieneś użyć natywnego wiązania, ponieważ ma to sens.

Native

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

Drugi przykład wygląda głupio. Dodajesz więcej złożoności dla czegoś, co nie powinno być skomplikowane.