Knockoutjs:如何根据类型和媒体类型进行过滤

Knockoutjs: how to filter by genre AND by mediatype

本文关键字：类型媒体过滤 Knockoutjs 何根更新时间：2023-09-26

6天前，我问了这个问题:

如何从过滤器值中进行选择，其中类型逗号分隔的值仅包含所选择的内容

我得到了答案;一个家伙给这个提琴提供了解决方案:

https://jsfiddle.net/AnishPatelUk/7swLn92c/

但是我遇到了另一个问题。虽然我有它搜索逗号字符串的匹配，并返回匹配等于数组的长度。此代码不完整。

我们的目标是让用户选择多个类型并显示这些类型。但是，当用户选择媒体类型，如DVD或蓝光。结果应该以DVD和/或蓝光格式显示该类型的所有项目。

例如:

用户选择:冒险，科幻，然后Blueray;只有《星球大战》和《黑客帝国》应该出现。

如果用户选择:冒险，科幻;《星球大战》、《指环王》和《黑客帝国》都应该出现。

对于选择一个匹配i使用:

var match = ko.utils.arrayFirst(genreValues,
function (genre) {
return self.filterValues.indexOf(genre.trim()) > -1;});
if (match) {
   return match;
}

但是我使用

来显示所有匹配的结果

var matches = ko.utils.arrayFilter(genreValues, function (genre) { return 
self.filterValues.indexOf(genre.trim()) >= 0; });
return matches.length === self.filterValues().length;

也许有一种方法可以把它们结合起来?这是我的小提琴尝试:https://jsfiddle.net/0jr5Lc25/

    self.filterProducts = ko.computed(function () {
    return ko.utils.arrayFilter(self.products(),function (product) {
        var genreValues = product.genre.split(",");
        var mediaValues = product.media;
        var genreMatch = false;
        var mediaMatch = false;
        ko.utils.arrayForEach(genreValues, function (genre) {
            if( self.filterValues.indexOf(genre.trim()) >= 0){
                genreMatch = true;
            }
            //return self.filterValues.indexOf(genre.trim()) >= 0;
        });
        if(self.filterMedia().length === 0){
            mediaMatch = true;
        }
        if(self.filterValues().length === 0){
            genreMatch = true
        }
        // if string
        if(self.filterMedia().indexOf(mediaValues.trim()) >= 0){
          mediaMatch = true;
        }
        // if array
        //ko.utils.arrayForEach(mediaValues, function (media) {
            //if(self.filterMedia().indexOf(media.trim()) >= 0){
                //mediaMatch = true;
            //}
        //});
        if(genreMatch && mediaMatch){
        return true;
        } return false;
    });
});

你有一些问题;

ko.utils。arrayFilter只需要使用一次
var medimatches = ko.utils。arrayFilter (mediaValues…是在和自己比较。
BlueRay不等于bluay
科幻html复选框正在工作，更正了html.

https://jsfiddle.net/0jr5Lc25/36/