Привязка CSS не работает в Knockout JS
Я новичок в Knockout JS, поэтому мне нужна ваша помощь, чтобы исправить одну небольшую проблему. Я пытаюсь связать стиль css со строкой таблицы на странице CSHTML на основе условия. Я добавил 2 строки, но для каждого элемента отображается только по одной с использованием атрибута visible. Ниже приведен мой код cshtml:
<table class = "listing">
<tbody class = "no-wrap" data-bind = "foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr class = "selectable" data-bind = "visible: !$root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class = "check"><span></span></td>
--
--
<tr/>
<tr class = "selectablematch" data-bind = "visible: $root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class = "check"><span></span></td>
--
--
<tr/>
Базовый Typescript: Внутри файла app.listing.ts:
isSelected(item: T) {
return this.selectedItems.indexOf(item) >= 0;
}
Как вы можете видеть, на основе результата метода isMatchedCase() (который возвращает логическое значение) я отображаю любой из tr (выбираемое или выбираемое соответствие). Проблема в том, что css на tr привязывается только для первого tr, то есть с классом, который можно выбрать, и не привязывается с selectablematch tr. Метод 'isSelected($data)' не вызывается при установке флажка в первом td для 'selectablematch' tr. Не могли бы вы, ребята, дайте мне знать, что мне здесь не хватает?
@ray - В том-то и дело, я тоже не вижу ошибок в консоли :( И до этого есть только привязки в 'visible' и цикле foreach, как я уже упоминал в коде.
Можно ли будет поделиться остальной частью вашего кода?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Меня немного смущает, зачем вам для начала нужны 2 tr. Что вы можете сделать, так это иметь computed, который вернет вам правильный класс и будет иметь только одну строку, которая будет всегда видна. Не нужно иметь дело с скрытием / показом и т. д.
Посмотрите эту статью о привязке css и как это делается. Вот что я предлагаю:
<table class = "listing">
<tbody class = "no-wrap" data-bind = "foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr data-bind = "css: { rowClass($data), selected: $root.searchResultsListing.isSelected($data) }">
<td class = "check"><span></span></td>
<tr/>
</tbody>
</table>
И ваш pureComputed (завернутый в функцию, чтобы мы могли передавать $ data):
var rowClass = function(data) {
return ko.pureComputed(function(){
return isMatchedCase(data) ? 'selectablematch' : 'selectable')
)}
}
Я думаю, это должно помочь вам двигаться в правильном направлении.
Похоже, это намного лучший подход. Спасибо @Akiron.
Код выглядит нормально ... Есть ли еще привязка до
selectablematch? Есть ли ошибка?