Knockout.js - Bildbasis auf Tabellenwerten anzeigen

Question

Ich habe eine Tabelle mit 9 Spalten. Mit knockoutjs möchte ich in der Lage sein, eines von drei Bildern anzuzeigen, abhängig davon, ob bestimmte Spalten null sind. Der Code unten zeigt meinen letzten Versuch, aber es setzt alle 3 Bilder in die Zelle, als ob alles wieder wahr wäre.

<tbody data-bind="foreach:xrefs"> 
    <tr> 

     <td> 


      @*<img data-bind="if: API14 == null || PROP_NM == null || PROD_ZONE_NM == null || LEASE_NAME == null || WELL_NO == null" src="~/img/warning_25.png" /> 
      <img data-bind="if: PROP_NO == null || ENTITY == null" src="~/img/error-25.png"/> 
      <img data-bind="ifnot: PROP_NO == null || ENTITY == null || API14 == null || PROP_NM == null || PROD_ZONE_NM == null || LEASE_NAME == null || WELL_NO == null " src="~/img/green_Chk_25.png" />*@ 
     </td> 



     <td data-bind="text:API14"></td> 
     <td data-bind="text:PROP_NO"></td> 
     <td data-bind="text:PROP_NM"></td> 
     <td data-bind="text:ENTITY"></td> 
     <td data-bind="text:PROD_ZONE_NM"></td> 
     <td data-bind="text:LEASE_NAME"></td> 
     <td data-bind="text:WELL_NO"></td> 
     <td class="text-nowrap"> 
      <a data-bind="attr:{href:'@Url.Action("Details")/'+id}" class="btn btn-info">Details</a> 
      <a data-bind="attr:{href:'@Url.Action("Edit")/'+id}" class="btn btn-primary">Edit</a> 
      <a data-bind="attr:{href:'@Url.Action("Delete")/'+id}" class="btn btn-danger">Delete</a> 
     </td> 
    </tr> 
</tbody> 

Answer 1

Der wenn nur verbindlich zeigt/versteckt den Inhalt des Elements, dass die Bindung an angewendet. Um Ihre IMG-Elemente verschwinden zu lassen, müssen Sie sie in ein containing-Element einfügen oder das virtuelle knockout-Element für die Bindung verwenden.

<td>  
    <!-- ko if: API14 == null || PROP_NM == null || PROD_ZONE_NM == null || LEASE_NAME == null || WELL_NO == null --> 
     <img src="~/img/warning_25.png" /> 
    <!-- /ko --> 
    ... 
</td>