When debugging with Chrome, I can see CoverPrices has 9 elements. The foreach loop actually works well and the table looks correct with the first span being bound to Item1 correctly.
However, the if binding does not work and both images are displayed. Yet, all the elements in Item2 have the true value, so only the first image should show up.
<!-- 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 ?
Image is not binding to DOM, but the image is loading. You can check in Network traffic. It should not load when if bind is used
The
if-binding
does not affect the whole element, but its content. And because animg
element does not have content, the binding does not matter.This will work, with
span
as container elements:There is also a container-less syntax, if you don't want the additional elements: