使用Knockout使用多个字段/列和控件过滤ViewModel数据

Question

我是KnockoutJS的新手,但到目前为止我还是喜欢它.我想要做的是使用窗体上的多个字段/列和控件来过滤我的viewmodel数据,但我不知道该怎么做.让我(希望)进一步解释.

我有一个viewmodel可观察数据数组,其中填充了来自后端数据库的JSON数据.此数据集包含多个我想要过滤的列,以便显示更改为仅显示所选项.我已经使用了ko.utils.arrayFilter和ko.utils.stringStartsWith的示例,如链接http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html所示.这非常适合作为搜索类型的过滤器 - 但仅限于我的数据表(viewmodel)中的一个字段.

第一个问题:有没有办法扩展此示例,以便在viewmodel的多个列中搜索文本框中键入的值,并返回显示结果？

但更重要的是,我的情况是我在窗体上有多个不同类型的控件(带有值列表的下拉列表,带有不同选项的单选按钮等),我需要根据所选的选项过滤完整的数据集在这些控件中.并且,控件的有效值与viewmodel数据集中的不同列/字段相关.

我希望这是有道理的.基本上,我们正在尝试替换具有相同功能的Windows窗体应用程序.也就是说,对于Windows窗体应用程序,所有过滤选项都为SQL选择构建一个大的where子句(例如,WHERE Name ='在下拉列表中选择的名称'和优先级IN(一个或多个选中的复选框选项)和视图=选择单选按钮等).然后将SQL查询发送到数据库,并将结果放入网格中.

那么,有什么方法可以让我在viewmodel(当然还有knockout)的多个字段上使用多个过滤器值来过滤和显示客户端的所有数据？或者我是否必须遵循与Windows应用程序类似的想法,并使用所选选项中的where子句重新查询数据库？

谢谢!

如果您需要更多细节,请告诉我(这有点难以书面解释).

Answer 1

您只需将这些条款组合在一起arrayFilter,就像这样.

self.filteredRecords = ko.computed(function() {
        return ko.utils.arrayFilter(self.records(), function(r) {
            return (self.idSearch().length == 0 ||
                       ko.utils.stringStartsWith(r.id, self.idSearch())) &&
                   (self.nameSearch().length == 0 || 
                       ko.utils.stringStartsWith(r.name.toLowerCase(), self.nameSearch().toLowerCase())) &&
                  (self.townSearch().length == 0 ||
                       r.homeTown == self.townSearch())
        });
    });

这是一个小提琴