Knockout.js - 根据表值显示图像

Question

我有一张有 9 列的表格。我希望能够使用 knockoutjs 来显示三个图像中的一个，具体取决于某些列是否为空。下面的代码显示了我最近的尝试，但是它将所有 3 个图像都放在单元格中，就好像所有内容都返回 true 一样。

<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

if 绑定只显示/隐藏应用绑定的元素的内容。要让您的 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>