如何从 filtervalues 中进行选择，其中流派逗号分隔的值仅包含所选内容

我有一个产品和服务列表，这些产品和服务在淘汰赛中被输入到可观察量中。目前，它适用于用户从流派列表中选择并挖空在逗号分隔字段中返回包含该流派的产品列表。

每种产品都被送入敲除，如下所示：

+-------------------+------------------------------------+
|       name        |               genre                |
+-------------------+------------------------------------+
| Star Wars         | Sci-Fi, Action, Adventure, Blueray |
| Lord of the Rings | Fantasy, Fiction, Adventure, DVD   |
| Matrix            | Sci-Fi, Fantasy, Blueray           |
+-------------------+------------------------------------+

我的复选框列表在视图中如下所示：

<div class="col-md-3 filterlist" >
<form name="specialties" action="" method="POST">
    <strong>Specialties</strong>
    <ul class="categorySearchList">

            <li><label><input type="checkbox" name="" value="Sci-Fi" data-   bind="checked:filterValues" /> Sci-Fi</label></li>
            <li><label><input type="checkbox" name="" value="Action" data-bind="checked:filterValues" /> Action</label></li>
            <li><label><input type="checkbox" name="" value="Adventure" data-bind="checked:filterValues" /> Adventure</label></li>
            <li><label><input type="checkbox" name="" value="Fantasy" data-bind="checked:filterValues" /> Fantasy</label></li>
            <li><label><input type="checkbox" name="" value="Fiction" data-bind="checked:filterValues" /> Fiction</label></li>
    </ul>
    <hr />
    <strong>Type</strong>
    <ul class="categorySearchList">
       
            <li><label><input type="checkbox" name="" value="DVD" data-bind="checked:filterValues " /> DVD</label></li>
            <li><label><input type="checkbox" name="" value="Bluray" data-bind="checked:filterValues " /> Bluray</label></li>
        
    </ul>
</form>
</div>
<div></div>
<div class="span8" style="float: left;">
<div data-bind="foreach: filterProducts">
    <div class="wrapp2 span2" style="margin: 12px 5px;">
        <p>
            <img src="~/Content/images/image.jpg" style="width: 100%;" alt="Product Name"/>
             <strong data-bind="text: genre"></strong>&nbsp;strong data-bind="text: name"></strong>
        </p>
    </div>
</div>

。

依此类推，输出此内容：

☐ 科幻

☐ 行动

☐ 奇遇

☐ 幻想

☐ 小说

<小时 />

☐ 影碟

☐ 蓝光

我的淘汰脚本是这样的：

function Program(course) {
this.name = course.Value;
this.genre = course.Text;
}

function ProgramModel() {
var self = this;
self.isLoading = ko.observable(true);
self.products = ko.observableArray();
self.filterValues = ko.observableArray(); 
$.getJSON("/extra/api/api/GetProductProgramList", function (data) {
    ko.utils.arrayForEach(data, function (course) {
        self.products.push(new Program(course));
    });
    self.isLoading(false);
});
self.filterProducts = ko.computed(function () {
    return ko.utils.arrayFilter(self.products(),
    function (product) {
            var genreValues = product.genre.split(",");
            var match = ko.utils.arrayFirst(genreValues,
                function (genre) {
                    return self.filterValues.indexOf(genre.trim()) > -1;
                });
        if (match) {
            return match;
        }
    });
});
self.filter = function (genre) {
    self.currentFilter(genre);
};

}
ko.applyBindings(new ProgramModel());

因此，它在用户从列表中选择流派并显示的地方工作。例如，用户选择"科幻"和"星球大战"和"黑客帝国"显示，但是当用户选择"科幻"和"DVD"时，将显示所有三个。当真的什么都不应该出现时，因为该列表中没有科幻DVD。

所以我想让它拆分流派，只选择所选内容的 ANDS。就像我选择了冒险和蓝光一样;只有星球大战应该出现。

任何帮助将不胜感激！

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

function (product) {
    var genres = ko.utils.arrayForEach(product.genre.split(","),
        function(genre) { return genre.trim();});
    var filters = self.filterValues();
    for (var i = 0; i < filters.length; ++i) {
        if (genres.indexOf(filters[i].trim()) < 0) {
            return false;
        }
    }
    return true;
}