knockout.js - KnockoutJS 通过另一个 ObservableArray 过滤 ObservableArray

Question

假设我有一个 View 模型，其中包含可观察的产品数组，该产品对象上有一系列类别(Id、名称)。然后我还有一个可观察的过滤器数组，它们只是类别。有没有一种方法可以让我找到具有过滤器可观察数组中所有类别的所有产品。因此，我需要返回过滤器数组中具有所有类别的所有产品，而不仅仅是一个过滤器，但该产品必须包含所有过滤器。提前致谢

Answer 1

我认为它应该是这样的:

        function Product(id, name) {
            this.id = id;
            this.name = name;
            this.categories = [];
        }

        function ProductCategory(name) {
            this.name = name;
        }

        function ViewModel() {
            this.products = ko.observableArray();
            this.filters = ko.observableArray();
            var self = this;

            //dummy data
            self.init = function () {
                var c1 = new ProductCategory('Cat1');
                var c2 = new ProductCategory('Cat2');
                var c3 = new ProductCategory('Cat3');
                var c4 = new ProductCategory('Cat4');

                var p1 = new Product(1, 'Prod 1');
                p1.categories = [c1, c2];

                var p2 = new Product(2, 'Prod 2');
                p2.categories = [c1, c3, c4];

                var p3 = new Product(3, 'Prod 3');
                p3.categories = [c3, c4];

                var p4 = new Product(4, 'Prod 4');
                p4.categories = [c1, c2, c4];

                self.products([p1, p2, p3, p4]);
                self.filters([c1, c3, c4]);
            };

            self.init();

            //filtered products will be recalculated on products or filters array change
            self.filteredProducts = ko.computed(function () {
                var filteredProducts = [];
                ko.utils.arrayForEach(self.products(), function (product) {
                    var notInFilter = false;

                    for (var i = 0; i < product.categories.length; i++) {
                        var category = product.categories[i];

                        if (self.filters().indexOf(category) < 0) {
                            notInFilter = true;
                            break;
                        }
                    }

                    if (!notInFilter) {
                        filteredProducts.push(product);
                    }
                });

                return filteredProducts;
            });
        }

Fiddle带代码