Блог

У меня следующее tbody с динамическими строками и столбцами:

  <tbody data-bind="foreach: ClientListingData">
        <tr>
            <!-- ko foreach: $parent.OrderedColumns -->
            <!-- if: $parent[OrderedColumns] == 'ClientID' -->
            <td class="greenbg">
                <span data-bind="text:  $parent[$data]"></span>
            </td>
            <!-- /ko -->
            <!-- if: $parent != 'ClientId' -->
            <td>
                <span data-bind="text:  $parent[$data]"></span>
            </td>
            <!-- /ko -->
            <!-- /ko -->
        </tr>
    </tbody>
  

ClientListingData содержит все данные сетки в формате JSON и OrderedColumns представляет собой объект массива, содержащий имя столбца, подобное [ClientID,ClientName..etc] которому я использую для динамической привязки моей сетки. Мое требование заключается в том, что при имени столбца ClientID я хочу td иметь другой css класс, который я пытаюсь указать выше. Как я могу прочитать имя столбца, используя if привязку, и что-то сделать, используя OrderedColumns массив? Также возможно ли вложить условия, используя if привязку в моем примере?Например, если значение ClientID больше 10, я хочу, чтобы у td был оранжевый фон, а если оно больше 100, у td должен быть красный фон.

Существует привязка специально для CSS

http://knockoutjs.com/documentation/css-binding.html

 <div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>