knockout “if binding” not working

问题:

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 ?

回答1:

The if-binding does not affect the whole element, but its content. And because an img element does not have content, the 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 a container-less syntax, if you don't want the additional elements:

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

回答2:

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

文章来源: knockout “if binding” not working