Knockout.js - テーブル値に画像ベースを表示

Question

私は9列のテーブルを持っています。 knockoutjsを使ってできることをしたいのは、特定の列がnullであるかどうかに応じて、3つのイメージのうちの1つを表示することです。コードでは、私の最新のアテンプトを示していますが、3つの画像をすべて真の場合のようにセルに配置します。のみ番組を結合場合

<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

ザ/結合が印加され、その要素の内容を隠します。あなたのIMG要素が消えるようにするには、それぞれの要素を包含要素にラップするか、またはノックアウト仮想要素をバインディングに使用する必要があります。

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