javascript - CSS 绑定(bind)在 Knockout JS 中不起作用

Question

我是 Knockout JS 的新手，因此需要您的帮助来解决一个小问题。我正在尝试根据条件将 css 样式与 CSHTML 页面中的表行绑定(bind)。我添加了 2 行，但使用“可见”属性为每个元素只显示了一行。以下是我的 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() 方法(返回 bool 值)的结果，我显示了 tr(可选或可选匹配)之一。问题是 tr 上的 css 仅针对第一个 tr 绑定(bind)，即与可选择的类绑定(bind)，而不与 selectablematch tr 绑定(bind)。当为 'selectablematch' tr 单击第一个 td 中的复选框时，不会调用方法 'isSelected($data)'。你们能告诉我我在这里缺少什么吗？

Answer 1

我对为什么需要 2 tr 开头有点困惑。你可以做的是有一个 computed ，它会为你返回正确的类，并且只有一行总是可见的。不需要处理隐藏/显示等

Look at this article on the css binding以及它是如何完成的。这是我的建议:

<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')
  )}
}

我认为这应该能让您朝着正确的方向前进。