Knockoutjs：如何按流派和媒体类型过滤

Question

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

how to select from filtervalues where genre comma delimited values contain only what is selected

我得到了答案；和一个家伙提供了这个小提琴的解决方案：

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

---

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

目标是让用户选择多个流派并显示这些流派。但是当用户选择 DVD 或蓝光等媒体类型时。结果应将该类型的所有项目显示为 dvd 和/或蓝光。

例如：

用户选择：冒险、科幻，然后是蓝光；只有星球大战和矩阵应该出现。

如果用户选择：冒险、科幻；星球大战、指环王和黑客帝国应该会出现。

为了选择我使用的一个匹配项：

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/

Answer 1

    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;
    });
});

您遇到了一些问题；

1. ko.utils.arrayFilter 只需要使用一次。

2. var mediamatches = ko.utils.arrayFilter(mediaValues ... 与需要为 mediaValues 的 self.filterValues 进行比较。

3. 蓝光不等于蓝光

4. Sci-Fi html 复选框正在纠正 html。

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