使用 table 数据中可观察到的敲除值来应用 CSS class

Question

我正在努力让 KO CSS binding 工作。 portAvailable 是 $root.devices 中每个设备中存在的可观察布尔值。当设备端口不可用时，portAvailable为false，并且CSS class 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>

Answer 1

我猜 portAvailable 是可观察的。您需要在表达式中解包它：

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

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

使用 table 数据中可观察到的敲除值来应用 CSS class

Use value of knockout observable within table data to apply CSS class

javascript

css

knockout.js