Question

我是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/>

基本打字稿：内部app.listing.ts文件：

isSelected(item: T) {
   return this.selectedItems.indexOf(item) >= 0;
}

如您所见，基于isMatchedCase()方法的结果（返回布尔值），我正在显示tr之一（selectable或selectablematch）。问题是tr上的css仅绑定到第一个tr，即与select类绑定在一起，而没有与selectablematch tr绑定在一起。单击'isSelected($data)' tr的第一个td中的复选框时，不会调用方法'selectablematch'。你们可以让我知道我在这里想念的吗？

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

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

CSS绑定在Knockout JS中不起作用

1 个答案: