javascript - knockout : how to filter by genre AND by mediatype

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;

也许有一种方法可以将它们结合起来？这是我的 fiddle 尝试: 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 ... 与 self.filterValues 进行比较，需要是 mediaValues。

3. 蓝光不等于蓝光

4. 科幻 html 复选框已正常工作，已更正 html。

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