代码之家 › 专栏 › 技术社区 › Nehal Jain

CSS绑定在Knockout JS中不起作用

knockout.js typescript css c# javascript

1

Nehal Jain · 技术社区 · 7 年前

我是新淘汰的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/>

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

如您所见,基于 isMatchedCase() 'isSelected($data)' 当单击第一个td中的复选框时,将不会调用 'selectablematch'

1 回复 | 直到 7 年前

1

2

Akrion 7 年前

我不明白你为什么要有两个 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')
  )}
}