#knockout.js
#knockout.js
Вопрос:
У меня следующее 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 должен быть красный фон.
Ответ №1:
Существует привязка специально для 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>
Комментарии:
1. это для применения разных классов CSS на основе наблюдаемого значения, но что использовать, когда я хочу отобразить совершенно другую разметку на основе некоторого условия. Например, использование
if
привязки KO дает другуюHTML
разметку, как я написал в своем вопросе?2. Как вы сказали, если вы хотите различную разметку на основе условия, используйте if . Если вам нужен другой css, примените класс, используя привязку css. Да, вы также можете вложить if. Если вы создадите скрипку js, я посмотрю, как это исправить.