knockout.js - ノックアウト「if binding」が機能しない

Question

Chrome でデバッグすると、CoverPrices に 9 つの要素があることがわかります。foreach ループは実際にはうまく機能し、テーブルは最初のスパンが Item1 に正しくバインドされているように見えます。

ただし、if バインディングが機能せず、両方の画像が表示されます。ただし、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要素にはコンテンツがないため、バインディングは重要ではありません。

これは、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>

追加の要素が必要ない場合は、コンテナなしの構文もあります。

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