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元素消失，你必须将每个元素包装在一个包含的元素中，或者使用knockout虚拟元素来进行绑定。

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

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

1 个答案: