如何从类型为逗号分隔的值仅包含所选内容的过滤器值中选择 [英] how to select from filtervalues where genre comma delimited values contain only what is selected
问题描述
我有一个产品和服务的清单，这些产品和服务会在淘汰赛中送入可观察物.目前，它可以在用户从流派列表中进行选择的情况下工作，而剔除会在逗号分隔的字段中返回包含该流派的产品的列表.
I have a list of products and services thats being fed into observables in knockout. Currently it works where the users selects from a list of genres and knockout returns a list of products that contains that genre in a comma delimited field.
每种产品都按如下方式进入淘汰赛:
Each product get fed into knockout as this:
+-------------------+------------------------------------+
| name | genre |
+-------------------+------------------------------------+
| Star Wars | Sci-Fi, Action, Adventure, Blueray |
| Lord of the Rings | Fantasy, Fiction, Adventure, DVD |
| Matrix | Sci-Fi, Fantasy, Blueray |
+-------------------+------------------------------------+
和我的复选框列表在视图中如下:
and my checkbox list are as this in the view:
<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> strong data-bind="text: name"></strong>
</p>
</div>
</div>
...
以此类推，输出如下:
☐科幻
☐行动
☐冒险
☐幻想
☐小说
☐DVD
☐蓝光
我的淘汰赛脚本是这样:
My knockout script is this:
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());
因此，它在用户从列表中选择流派并显示的地方起作用.例如，用户选择了Sci-Fi，出现了《星球大战》和《黑客帝国》，但是随后，当用户选择了Sci-Fi和DVD时，这三个都出现了.真的什么都不应该出现，因为该列表中没有科幻dvd.
So it works where the user selects a genre from the list and it displays. For example the user selects Sci-Fi and Star Wars and Matrix shows up, but then when the user selects Sci-Fi AND DVD all three show up. when really nothing should show up, because theres no sci-fi dvd in that list.
所以我想制作它以便拆分流派，并仅选择所选择内容的ANDS.就像我选择了Adventure AND Blueray一样；只有《星球大战》应该出现.
So i want to make it so that it splits the genres and only selects the ANDS of what was selected. Like if i selected Adventure AND Blueray; only Star Wars should appear.
任何帮助将不胜感激！
推荐答案
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;
});
});
弄清楚了.就像返回带有filterValues的匹配长度一样简单！
Figured it out. it was as simple as just returning the match length with the filterValues!
这是工作中的小提琴.
这篇关于如何从类型为逗号分隔的值仅包含所选内容的过滤器值中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
