comment foreach binding vs foreach binding in knockoutjs

Question

In my HTML I can define these knockout foreach bindings:

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

vs

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

Where are the differences between those two approaches?

Answer 1

Use native binding when a parent-child relationship exists within the binding section, like a ul and a li.

Use the comment syntax for containerless binding when your binding section does not have a parent-child relationship.

In your example you use the first code block because you are not trying to bind to a parent-child structure. All you want to do is just bind your customer data to a div, you shouldn't have to create a parent div and foreach through the customers and append another div inside of the parent div. It's more than you want to do.

Good use of containerless binding

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

However, if you have an ordered list you should use the native binding because it just makes sense.

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>

The second example just looks silly. You're adding more complexity for something that shouldn't be complicated.

Answer 2

In some cases, you might want to duplicate a section of markup, but you don’t have any container element on which to put a foreach binding

To handle this, you can use the containerless control flow syntax, which is based on comment tags

Mode details on The "foreach" binding, Note 4: Using foreach without a container element