Css binding not working in knockout JS

See more:

C#

Javascript

Knockout.js

, +

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.