knockout.js - knockout "if binding"不工作

Question

使用 Chrome 进行调试时，我可以看到 CoverPrices 有 9 个元素。 foreach 循环实际上运行良好，表格看起来正确，第一个跨度正确绑定(bind)到 Item1。

但是，if 绑定(bind)不起作用，两个图像都会显示。然而，Item2 中的所有元素都具有真实值，因此应该只显示第一个图像。

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

我的装订有问题吗？

Answer 1

if-binding不影响整个元素，但影响其内容。因为 img元素没有内容，绑定(bind)无所谓。

这将适用于 span作为容器元素:

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

还有一个container-less syntax ，如果您不想要其他元素:

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