我是 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(可选或可选匹配)之一。问题是 tr 上的 css 仅绑定到第一个 tr,即与可选择的类,而不是与 selectablematch tr 绑定。'isSelected($data)'
当第一个 td 中的复选框被单击以获取'selectablematch'
tr时,不会调用该方法。你们能告诉我我在这里缺少什么吗?
我对为什么你需要 2tr
开始有点困惑。你可以做的是有一个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')
)}
}
我认为这应该让你朝着正确的方向前进。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句