Как привязать значение к colspan в зависимости от условия, используя привязку данных в knockout.js?

Question

Как связать данные свойством colspan столбца таблицы со значениями с помощью тернарного оператора?

Я пробовал что-то вроде этого:

<td data-bind="attr: { colspan: condition() ? 3 : 4 }"> .... <td>

, но оно всегда принимает colspanкак 4 (при условии, что условие всегда ложно)

У меня вопрос, использую ли я неправильный синтаксис для привязки свойств?

Любые ответы будут высоко оценены ... Большое спасибо заранее.

Answer 1

Это похоже на работу?

function ViewModel() {
  var self = this;
  self.isValid = ko.observable(true);
  self.toggleColspan = function () { 
    console.log('changed to colspan ' + (self.isValid() ? 4 : 3));
    return self.isValid(!self.isValid()); };  
  };
ko.applyBindings(new ViewModel());

table tr td {
  background-color: gray;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<a href="#" data-bind="click: toggleColspan">toggle</a>
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-bind="attr: { colspan: $root.isValid() ? 3 : 4 }">body1</td>
</tr>
</tbody>
</table>