Knockout if binding does not work

Question

When debugging with Chrome, I see that CoverPrices has 9 elements. The foreach loop actually works well, and the table looks correct when the first range is bound to Item1 correctly.

However, the if binding does not work and both images are displayed. However, all items in Item2 have a true value, so only the first image should appear.

<!-- ko foreach: CoverPrices --> <tr> <td> <span data-bind="text: Item1"></span> </td> <!-- ko foreach: Item2 --> <td> <img src="~/Images/yes.png" alt="oui" data-bind="if: $data" /> <img src="~/Images/no.png" alt="non" data-bind="ifnot: $data" /> </td> <!-- /ko --> </tr> <!-- /ko --> 

Is there something wrong with my binding?

Answer 1

if-binding does not affect the entire element, but its contents. And since the img element has no content, binding does not matter.

This will work with span as container elements:

 <span data-bind="if: $data"><img src="~/Images/yes.png" alt="oui" /></span> <span data-bind="ifnot: $data"><img src="~/Images/no.png" alt="non" /></span> 

There is also syntax without a container if you do not want to add additional elements:

 <!-- ko if: $data --> <img src="~/Images/yes.png" alt="oui" /> <!-- /ko --> <!-- ko ifnot: $data --> <img src="~/Images/no.png" alt="non" /> <!-- /ko --> 

Answer 2

The image is not a DOM binding, but the image is loading. You can check network traffic. It should not load if binding is used.