Question

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

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

目前我通过viewmodel在数据中创建了所有模型和pastin，并且我得到了一个过滤的列表，但是我不明白如何通过foreach过滤器和arrayFilter返回正确的项目，这是它得到的地方abit blurry。

       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组合< / LI>

您的固定代码是这样的：

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。

Knockoutjs arrayFilter多个下拉列表

1 个答案: