CSS 绑定在 Knockout JS 中不起作用

Posted 2023-03-27

【中文标题】CSS 绑定在 Knockout JS 中不起作用

【英文标题】：CSS binding not working in Knockout JS

【发布时间】：2019-01-23 00:06:04

【问题描述】：

我是 Knockout JS 的新手，因此需要您的帮助来解决一个小问题。我正在尝试根据条件将 css 样式与 CShtml 页面中的表格行绑定。我添加了 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() 方法（返回布尔值）的结果，我正在显示 tr（可选择或可选择匹配）中的任何一个。问题是 tr 上的 css 仅与第一个 tr 绑定，即类可选，而不是与 selectablematch tr 绑定。当为'selectablematch' tr 单击第一个td 中的复选框时，不会调用方法'isSelected($data)'。你们能告诉我我在这里缺少什么吗？

【问题讨论】：

代码看起来没问题...selectablematch 之前还有其他绑定吗？有什么错误吗？

@ray - 就是这样，我在控制台中也没有看到任何错误:(并且在此之前只有“可见”和 foreach 循环中的绑定，正如我在代码中已经提到的那样。

是否可以共享您的其余代码？

【参考方案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')
  )

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

【讨论】：

这看起来是一个更好的方法。谢谢@Akiron。