javascript - Knockoutjs array过滤多个下拉列表

Question

我有一个关于 knockoutjs 中的 arrayFilter 的问题，我该如何用 2 个不同的下拉列表来过滤我的列表，这两个下拉列表应该是相关的，所以如果我选择了 1 种类型的建筑但没有区域，我应该显示所有该类型的建筑，但是，如果我在哪里选择建筑选项和区域选项，过滤应该考虑到这一点，我现在已经在原型(prototype)上工作了 2 天，但不知道如何在 arrayfilter 中返回正确的项目。

http://jsfiddle.net/vGg2h/138/

目前，我通过 View 模型制作了所有模型并粘贴在数据中，并且连接了一个过滤列表，但是我不明白如何通过 foreach 过滤器和 arrayFilter 返回正确的项目，这就是它得到的地方有点模糊。

       self.filteredList = ko.computed(function () {
            var filters = [];
            filters.push(self.selectedBuilding());
            filters.push(self.selectedArea());
           var currentList = [];

            ko.utils.arrayForEach(filters, function (filter) {
                if (typeof filter !== "undefined") {
                 ko.utils.arrayFilter(self.products(), function (item) {
                    if (filter.id == item.areaId || filter.value == item.buildingId) {
                            currentList.push(item);
                        } 
                 });
                }

            });
            return currentList;
        });

预先感谢您的回答!

Answer 1

您有两个问题:

• 您没有正确使用ko.utils.arrayFilter:您必须返回true或false，具体取决于是否应包含项目最终结果与否。因此，您不应该在 arrayFilter
内构建结果
• 您总是从完整列表开始，而不是一个接一个地应用过滤器，而是在 arrayFilter 中错误地构建结果，这会导致您的过滤器与 OR 组合，而不是像您那样与 AND 组合本来想要的

您的固定代码如下所示:

self.filteredList = ko.computed(function () {
    var filters = [];
    filters.push(self.selectedBuilding());
    filters.push(self.selectedArea());
    var currentList = self.products();

    ko.utils.arrayForEach(filters, function (filter) {
        if (typeof filter !== "undefined") {
            currentList = ko.utils.arrayFilter(currentList, function (item) {
                if (filter.id == item.areaId || filter.value == item.buildingId) {
                    return true;
                }
            });
        }
    });
    return currentList;
});

演示 JSFiddle

通过重用相同的列表，可以更好地看到AND过滤，您可以重写代码以在两个单独的步骤中进行过滤:

self.filteredList = ko.computed(function () {
    var currentList = self.products();
    if (self.selectedBuilding())
    {
        currentList = ko.utils.arrayFilter(currentList, function(item) {
            return self.selectedBuilding().value == item.buildingId;
        });
    }
    if (self.selectedArea())
    {
        currentList = ko.utils.arrayFilter(currentList, function(item) {
            return self.selectedArea().id == item.areaId;
        });
    }
    return currentList;
});

在这段代码中，更清楚的是，您从完整列表开始，然后逐一应用不同的过滤器，进一步过滤原始列表。

演示 JSFiddle

注意:如果您最初想从一个空列表开始(就像在原始代码中一样)，那么如果所有过滤器都是空的，您可以只返回一个空数组:

self.filteredList = ko.computed(function () {
    if (!self.selectedBuilding() && !self.selectedArea())
        return [];
    //...
};

演示 JSFiddle .