淘汰赛 - 过滤多个对象的属性在观测对象数组 [英] Knockout - Filtering Objects in Observable Arrays by multiple Object Properties

问题描述

所以这里...我试图建立一个数据网格 Knockout.js 。我想从头开始（技能培养锻炼）构建它，所以我不希望使用KoGrid或SimpleGrid。

So here it is... I am attempting to build a data-grid with Knockout.js. I want to build it from scratch (skill building exercise), so I don't want to use KoGrid or SimpleGrid.

我遇到的问题是，我希望能够过滤基于文本输入的结果。该过滤器要经过的每个对象和过滤器上的仅的匹配列的值属性，它的键。

The issue I am having is that I want to be able to filter the results based on a text input. This filter has to go through each object and filter on ONLY the keys that match a column's value property.

示例的

Example

过滤与值'1'将包含1（ID 1和ID 3）属性返回两个数据的对象。

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

的jsfiddle

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));

它的伟大工程静态设置 c.value 在项目[c.value] ，但当我尝试通过数组循环 self.columns（）我没有得到返回结果。

It works great statically setting the c.value in item[c.value], but when I try to loop through the array of self.columns() I do not get results returned.

的建议书

我有 jQuery的，的 Knockout.js 3.0 和 underscore.js 在我手上。

任何帮助是极大AP preciated。

Any help is greatly appreciated.

推荐答案

在您的code就几个问题：

Just few problems in your code :

• 布尔必须返回ko.utils.arrayFilter的输出


• 您需要一种归纳为arrayForEach的作为过滤器是一个OR

我改变了你的code，以解决那些细节：

I changed your code to address those details :

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/

这篇关于淘汰赛 - 过滤多个对象的属性在观测对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！