9

我是 KnockoutJS 的新手，但到目前为止我很喜欢。我想要做的是使用表单上的多个字段/列和控件过滤我的视图模型的数据，但我不知道该怎么做。让我（希望）进一步解释。

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

第一个问题：有没有办法扩展这个例子，让在文本框中输入的值在视图模型的多个列中搜索，并返回结果以供显示？

然而，更重要的是，我的情况是，我在表单上有多个不同类型的控件（带有值列表的下拉列表、带有不同选项的单选按钮等），我需要根据选择的选项过滤完整的数据集在这些控件中。而且，控件的有效值与视图模型数据集中的不同列/字段相关。

我希望这是有道理的。基本上，我们正在尝试替换具有相同功能的 Windows 窗体应用程序。也就是说，对于 Windows 窗体应用程序，所有过滤选项都在为 SQL 选择构建一个大的 where 子句（例如，WHERE Name = 'name selected in dropdown' AND Priority IN（一个或多个选中的复选框选项）AND View = 选定的单选按钮等）。然后将 SQL 查询发送到数据库，并将结果放入网格中。

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

谢谢！

如果您需要更多详细信息，请告诉我（很难以书面形式解释）。

4

1 回答 1

15

您只需将 中的术语组合起来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())
        });
    });

这是小提琴

于 2012-08-18T00:24:43.047 回答