Css绑定不适用于淘汰JS [英] Css binding not working in knockout JS

问题描述

大家好，
 
我是Knockout JS的新手，因此需要你的帮助解决一个小问题。我试图根据条件将css样式与CSHTML页面中的表行绑定。我添加了2行，但使用'visible'属性只为每个项目显示一行。以下是我的cshtml代码：
 
< table class =listing> 
< tbody class =no-wrapdata-bind =foreach：searchResultsListing.pagedItems，select：searchResultsListing> 
< tr class =selectabledata-bind =visible：！$ root.isMatchedCase（$ data），css：{selected：$ root.searchResultsListing.isSelected（$ data   ）}> 
< td class =check>< span>< / span>< / td> 
  -  
  -  
< tr /> 
< tr class =selectablematchdata-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绑定，即类可选，并且没有与selectablematch tr绑定。当单击第一个td中的复选框为'selectablematch'tr时，不会调用方法'isSelected（$ data）'。你们能告诉我这里缺少的东西吗？

我的尝试：



我尝试将'isSelectable'方法放在其他各个地方，但似乎没有任何东西将该方法与selectablematch tr行绑定。

解决方案

root.isMatchedCase（

data），css：{selected：

root.searchResultsListing.isSelected（

Hi All,

I am new to Knockout JS, therefore need your help to fix one small issue. I am trying to bind css style with a table row in CSHTML page, based on a condition. I have added 2 rows but displaying only one for each item using 'visible' attribute. Following is my cshtml code:

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

Underlying Typescript: Inside app.listing.ts File:

isSelected(item: T) {
                return this.selectedItems.indexOf(item) >= 0;
            }
As you can see, based on the result of isMatchedCase() method (which returns a boolean), I am displaying either of the tr (selectable or selectablematch). The problem is the css on the tr is getting binded only for the first tr, i.e. with the class selectable, and not getting binded with the selectablematch tr. The method 'isSelected($data)' is not getting called when the checkbox in the first td is clicked for 'selectablematch' tr. Can you guys please let me know what I am missing here?

What I have tried:

I have tried placing the 'isSelectable' method at various other places, but nothing seemed to bind that method with the selectablematch tr row.

解决方案

root.isMatchedCase(

data), css: { selected:

root.searchResultsListing.isSelected(

这篇关于Css绑定不适用于淘汰JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！