javascript - Knockout - 通过多个对象属性过滤可观察数组中的对象

Question

所以这就是......我正在尝试使用 Knockout.js 构建一个数据网格。我想从头开始构建它(技能培养练习)，所以我不想使用 KoGrid 或 SimpleGrid。

我遇到的问题是我希望能够根据文本输入过滤结果。此过滤器必须遍历每个对象，并仅过滤与列的值属性匹配的键。

示例

Filtering with the value '1' will return both of data's objects with properties that contain 1. (ID 1 and ID 3).

<强> JSFIDDLE

HTML

<div data-bind="foreach: filteredItems">
    <p data-bind="text: LastName"></p>
</div>
<p>Filter:
    <input data-bind="value: filter, valueUpdate: 'keyup'" />
</p>
<p>Filter Value: <span data-bind="text: filter"></span></p>

JavaScript

var data = [{
    Id: 1,
    LastName: "Franklin"
}, {
    Id: 2,
    LastName: "Green"
}, {
    Id: 3,
    LastName: "1"
}];

var columns = [{
    value: 'Id'
}, {
    value: 'LastName'
}];

var Filtering = function (data, columns) {
    var self = this;

    self.items = ko.observableArray(data);
    self.columns = ko.observableArray(columns);
    self.filter = ko.observable();

    self.filteredItems = ko.computed(function () {
        var filter = self.filter();
        console.log(filter);
        if (!filter) {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function (item) {
                console.log('Filtering on Item');
                ko.utils.arrayForEach(self.columns(), function (c) {
                    var val = item[c.value];
                    if (typeof val === 'number') {
                        val = val.toString();
                    }
                    console.log('Filtering on Column');
                    return val.toLowerCase().indexOf(filter.toLowerCase()) > -1;
                });
            });
        }

    });
};

ko.applyBindings(new Filtering(data, columns));

在 item[c.value] 中静态设置 c.value 效果很好，但是当我尝试循环 self.columns 数组时() 我没有得到返回的结果。

建议

我有jQuery , Knockout.js 3.0 ，和underscore.js由我支配。

非常感谢任何帮助。

Answer 1

您的代码中只有几个问题:

• 需要返回一个 bool 值作为 ko.utils.arrayFilter 的输出
• 您需要对 arrayForEach 进行某种求和，因为您的过滤器是 OR

我更改了您的代码以解决这些详细信息:

var Filtering = function (data, columns) {
    var self = this;

    self.items = ko.observableArray(data);
    self.columns = ko.observableArray(columns);
    self.filter = ko.observable();

    self.filteredItems = ko.computed(function () {
        var filter = self.filter();
        console.log(filter);
        if (!filter) {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function (item) {
                console.log('Filtering on Item');
                var matching = -1;
                ko.utils.arrayForEach(self.columns(), function (c) {
                    var val = item[c.value];
                    if (typeof val === 'number') {
                        val = val.toString();
                    }
                    console.log('Filtering on Column');
                    matching+= val.toLowerCase().indexOf(filter.toLowerCase())+1;
                });
                 console.log(matching);
                return matching>=0;
            });
        }

    });
};

在那里为我工作:http://jsfiddle.net/Lzud7fjr/1/