knockout.js中的多个过滤器

eqfvzcg8  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(103)

假设我有电影数组,如果我想按类型过滤,我可以这样做

filtered = ko.computed(function() {
        var self = this;

        if ( ! self.genresFilter() || self.genresFilter() === 'all') {
            return this.sourceItems();
        } else {
            return ko.utils.arrayFilter(self.sourceItems(), function(item) {
                return app.utils.inArray(item.genre, self.genresFilter());     
            });
        }
    }, app.viewModels.games);

但我目前的困境是,如果我有类型,语言和长度html下拉菜单,我怎么能有效地过滤电影的所有或一些过滤器,使我可以有俄罗斯动作片或动作片的90分钟长度等?

pdsfdshx

pdsfdshx1#

你需要根据提供的每个过滤器逐步构建一个过滤列表。至于过滤器本身,它们应该由一个observable来表示,或者全部放在一个observableArray中。这很重要,因为当你改变过滤器时,它会触发计算的更新。
示例:

var filteredList = ko.computed({
    var currentList = this.sourceItems();
    var currentFilters = this.genresFilters();

    ko.utils.arrayForEach(currentFilters, function () {
        currentList = ko.utils.arrayFilter(currentList, function(filter) {
            return app.utils.inArray(filter, currentFilters);     
        });
    });

    return currentList;
});

这段代码将遍历每个过滤器,获取最新的过滤列表,并只保留满足所有条件的项。

sbdsn5lh

sbdsn5lh2#

我知道这是老主题了,但我最近也遇到了同样的问题,这是我为你的电影模型修改的解决方案。你也可以在这里查看:jsfiddle
第一个

o2rvlv0m

o2rvlv0m3#

筛选结果是针对值的组合,可以通过迭代所有可能的筛选器来完成,应用用户选择了某些内容的筛选器,并从结果中删除不符合筛选器的项。应用筛选器的顺序并不重要。项必须符合所有条件才能成为有效结果,因此,一旦不符合条件,您可以立即将其丢弃。
这是一些伪代码。


# item1:

# color: red

# price: 5

# language: EN

# item2:

# color: red

# price: 10

# language: RU

# item3:

# color: green

# price: 7

# language: DE

@items = ( item1, item2, item3 );
foreach filter in @selectedFilters {
  foreach item in @items {
    delete item from @items if filter.value != item.<filter.type>
    # or <, >, whatever
  }
}

return @items

相关问题