使用表数据中可观察到的剔除值来应用 CSS 类

Posted 2023-03-27

【中文标题】使用表数据中可观察到的剔除值来应用 CSS 类

【英文标题】：Use value of knockout observable within table data to apply CSS class

【发布时间】：2021-01-18 23:22:06

【问题描述】：

我正在努力让KO CSS binding 工作。 portAvailable 是$root.devices 中每个设备中存在的可观察布尔值。当设备端口不可用时，portAvailable 为false，并且CSS 类text-warning 应添加到设备的td 元素中。

它下面的 ifnot 数据绑定确实有效，所以我尝试应用 CSS 数据绑定的方式有问题，而不是 observable 本身。

<table class="table table-condensed">
<thead>
    <tr>
        <td style="text-align:center"> _('Name') </td>
        <td style="text-align:center"> _('Port') </td>
    </tr>
</thead>
<tbody data-bind="sortable:  data: $root.devices, options:  cancel: '.unsortable', handle: '.moveDevice', axis:'y' ">
    <tr>
        <td><span data-bind="text: name"></span></td>
        <td data-bind="css: 'text-warning': portAvailable == false">
            <span data-bind="text: port"></span>
            <i class="fa fa-exclamation-triangle" title=" _('Port currently unavailable') " data-bind="ifnot: portAvailable"></i>
        </td>
        <td style="text-align:right">
            <div class="btn-group">
                <a href="#" class="btn btn-mini moveDevice"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a>
            </div>
        </td>
    </tr>
</tbody>

【参考方案1】：

我猜portAvailable 是一个可观察的。你需要在表达式中解开它：

<td data-bind="css: 'text-warning': portAvailable() === false">

ifnot 绑定起作用的原因是，与所有绑定一样，如果它们收到的只是一个可观察对象，它会在必要时为您解开可观察对象。

【讨论】：

这行得通，谢谢！原来ifnot 也不起作用，但你的答案在那里也起作用。