ko.utils.arrayFilterを適用した後にUIを更新します。

Question

次のコードスニペットがあります。私は配列viewModel.customersをフィルタリングし、UIを更新しようとしています。ただし、UIは更新されず、エラーは表示されません。注記：配列のすべてのプロパティが観測可能です。コードの下にあるTeeは、はるかに大きなビューモデルの小さなカットです。

<div class="row" data-bind="visible: customers().length > 0"> 
    <div class="col-sm-4 col-lg-offset-8"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Filter Result"/> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="button" data-bind="click: filterCustomers">Filter</button> 
      </span> 
     </div> 
    </div> 
</div> 

var viewModel = { 
    PageName: "Editor",     
    textFilter: ko.observable(), // property to store the filter     
    customers: ko.observableArray([]),    
};  

viewModel.filterCustomers= function() { 
    return ko.utils.arrayFilter(viewModel.customers(), function (item) {     
     return item.CustomerNumber().toLowerCase() === viewModel.textFilter().toLowerCase(); 
    }); 
}; 

Answer 1

arrayFilterは、フィルタリングされた新しい配列を返します。元の配列は変更されません。結果を使って何かをしなければなりません。元の配列を更新するか、新しい配列を保持できるように別の観測値を作成して表示することができます。

viewModel.filteredCustomers = ko.observableArray([]); 

viewModel.filterCustomers = function() { 
    viewModel.filteredCustomers(ko.utils.arrayFilter(viewModel.customers(), function (item) {     
     return item.CustomerNumber().toLowerCase() === viewModel.textFilter().toLowerCase(); 
    })); 
};