ラジオボタンの選択に基づいてテーブルをフィルタリングします。

Question

ラジオボタンに基づいてアクティビティをフィルタリングする必要があるユーザテーブルが変更されました。

私はノックアウトでやったが動作しない、エラーは出ないが、テーブルが空になる、何か間違っている？フィルタリングなし

（foreachのがusersないfilteredUsers上にあるとき）、ページが完全に動作し

ラジオボタン：

<div class="btn"> 
    <input id="active" checked class="filterOpt selectedRadio" name="filterOpt" type="radio" data-bind="checked: inactive, attr: { 'value': 'false' }" /> <label class="filterLbl selectedRadio" for="active">ACTIVE</label> 
</div> 
<div class="btn"> 
    <input id="inActive" class="filterOpt" name="filterOpt" type="radio" data-bind="checked: inactive, attr: { 'value': 'true' }" /> <label class="filterLbl" for="inactive">INACTIVE</label> 
</div> 
<div class="btn"> 
    <input id="all" class="filterOpt" name="filterOpt" type="radio" data-bind="checked: inactive, attr: { 'value': 'all' }" /> <label class="filterLbl" for="all">ALL</label> 
</div> 

そしてKOコード：

self.users= ko.observableArray([]); 
self.inactive = ko.observable(); 
self.filteredClients = ko.observableArray([]); 

self.filteredUsers= ko.computed(function() { 
    var val = self.inactive(); 
    return self.users().filter(function (item) { 
     console.log(ko.toJSON(item)); 
     return item.inactive === val; 
    }); 
}); 

私のテーブル：

<!--ko foreach: filteredUsers--> 
     <table class="table"> 
      <tr class="header"> 
       <td class="name n" data-bind="text: name"></td> 
       <td class="rep" data-bind="text: email"></td> 
       <td class="status" data-bind="text: inactive"></td> 
      </tr> 
     </table> 

Answer 1

ラジオボタンは、選択した値を文字列として返します。 Userオブジェクトがinactiveをブール値とする場合、===はブール値と文字列を比較するため、常にfalseを返します。

これは例としてCodepenです。あなたはUser 2がブール値として真を持っていることを見ることができ、ショーではありません（User 1はショーです）。

これはUserオブジェクトです：

function User(name, inactive){ 
    var self = this; 
    self.inactive = inactive; 
    self.name = name; 
    self.email = "aaa@a.com" 
    } 

これはViewModelにある：

function ViewModel() { 
    self.users= ko.observableArray([ 
     new User('User 1', 'true'), 
     new User('User 2', true), 
     new User('User 3', 'false'),  
    ]); 
    self.inactive = ko.observable(); 
    self.filteredClients = ko.observableArray([ 
    ]); 

    self.filteredUsers= ko.computed(function() { 
     var val = self.inactive(); 

     return self.users().filter(function (item) { 
     console.log(ko.toJSON(item)); 
     return (item.inactive === val) || (val === 'all'); 
     }); 
    }); 
    } 

あなたが見ることができるように、私は3 Userを作成します。

 new User('User 1', 'true'), 
     new User('User 2', true), 
     new User('User 3', 'false'),  

秒trueを持っていますブール値として、他の文字列には文字列があります。ブール値をテキストで変更すると、両方のユーザーが表示されます。

あなたもお答えください。

は

Answer 2

:-) @ JoseLuisの答えの後、私はそれはいくつかのマイナーな変更で動作するように取得することができた、私は将来的に誰かが同様の問題に実行されます場合には、それを投稿してください。

@JoseLuis問題を述べたように、私は私は、2つのブール値の間の比較を持っBooleanにStringを構文解析することを解決するために、BooleanとStringの比較でした。

そして、これが全体の機能である：

self.filteredUsers = ko.computed(function() { 
    if (self.inactive() == "true" || self.inactive() == "false") { 
     var val = JSON.parse(self.inactive()); 
    } 
    else var val = self.inactive(); 
    return self.users().filter(function (item) { 
     return (item.inactive() === val) || (val === 'all'); 
    }); 
});