Блог

Я изо всех сил пытаюсь заставить работать привязку KO CSS. portAvailable является наблюдаемым логическим значением, присутствующим в каждом устройстве в $root.devices . Когда порт устройства недоступен, portAvailable is false , и класс CSS text-warning должен быть добавлен к td элементу для устройства.

Привязка ifnot данных под ним работает, поэтому что-то не так с тем, как я пытаюсь применить привязку данных CSS, а не саму наблюдаемую.

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

Я предполагаю portAvailable , что это наблюдаемое. Вам нужно развернуть его в выражении:

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

Причина ifnot , по которой привязка работает, заключается в том, что, как и все привязки, если все, что они получают, является наблюдаемым, оно при необходимости развернет наблюдаемое для вас.