knockout "if binding" funktioniert nicht

Question

Beim Debuggen mit Chrome kann ich sehen, dass CoverPrices 9 Elemente enthält. Die foreach-Schleife funktioniert tatsächlich gut und die Tabelle sieht korrekt aus, wobei die erste Spanne korrekt an Item1 gebunden ist.

Die if-Bindung funktioniert jedoch nicht und beide Bilder werden angezeigt. Alle Elemente in Item2 haben jedoch den wahren Wert, sodass nur das erste Bild angezeigt werden sollte.

<!-- 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 --> 

Ist etwas falsch mit meiner Bindung?

Answer 1

Die if-binding hat keinen Einfluss auf das gesamte Element, aber seine Inhalt. Und da ein Element img keinen Inhalt hat, spielt die Bindung keine Rolle.

Dies funktioniert mit span als Containerelemente:

<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> 

Es gibt auch eine container-less syntax ist, wenn Sie nicht die zusätzlichen Elemente wollen:

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

Answer 2

Bild DOM ist nicht bindend , aber das Bild wird geladen. Sie können den Netzwerkverkehr einchecken. Es sollte nicht laden, wenn wenn Bindung verwendet wird