javascript - data - knockout visible

Comenta foreach binding vs foreach binding en knockoutjs

Question

En mi HTML, puedo definir estos enlaces foreach knockout:

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

vs

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

¿Dónde están las diferencias entre esos dos enfoques?

Answer 1

En algunos casos, es posible que desee duplicar una sección de marcado, pero no tiene ningún elemento contenedor en el que poner un enlace foreach

Para manejar esto, puede usar la sintaxis de flujo de control sin contenedor, que se basa en etiquetas de comentarios

Detalles de modo en el enlace "foreach", Nota 4: Uso de foreach sin un elemento contenedor

Answer 2

Utilice enlace nativo cuando existe una relación padre-hijo dentro de la sección de enlace, como un ul y un li.

Use la sintaxis de comentarios para el enlace sin contenedor cuando su sección de enlace no tenga una relación padre-hijo.

En su ejemplo, usa el primer bloque de código porque no está intentando vincularse a una estructura padre-hijo. Todo lo que quiere hacer es vincular los datos de sus clientes a un div, no debería tener que crear un div principal y un foreach través de los clientes y agregar otro div dentro del div principal. Es más de lo que quieres hacer.

Buen uso de la unión sin contenedor

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

Sin embargo, si tiene una lista ordenada , debe usar el enlace nativo porque solo tiene sentido.

Nativo

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

Sin contenedor

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

El segundo ejemplo parece tonto. Está agregando más complejidad para algo que no debería ser complicado.