Question

我有以下代码段。我正在尝试过滤数组viewModel.customers并更新UI。但是，UI未更新，我也没有看到任何错误。注意：数组的所有属性都是可观察的。代码下面的T恤是一个更大的视图模型。

<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返回一个新的过滤数组。它不会改变原始数组。你必须对结果做一些事情，要么更新原始数组，要么创建另一个observable来保存新数组，以便显示它。

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

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

应用ko.utils.arrayFilter后更新UI

1 个答案: