Javascript 淘汰产品过滤
我正在尝试使用Knockout创建一个产品过滤系统。我将收到单独的JSON文件——一个包含产品(和所有相关属性)的文件,以及每个过滤器的单独文件。我需要在页面加载时显示所有结果,然后使用筛选复选框筛选出其他选项。我已经设置了一个基本的fiddle来复制我的结构:-在真实版本中,每个对象都将由JSON提供 我看过一些教程,我认为ko.utils.arrayfilter可能是我需要的解决方案,我也认为最好的方法可能是在我的对象中包含一个过滤函数,如下所示。但这两种观点都可能是错误的Javascript 淘汰产品过滤,javascript,html,json,knockout.js,knockout-3.0,Javascript,Html,Json,Knockout.js,Knockout 3.0,我正在尝试使用Knockout创建一个产品过滤系统。我将收到单独的JSON文件——一个包含产品(和所有相关属性)的文件,以及每个过滤器的单独文件。我需要在页面加载时显示所有结果,然后使用筛选复选框筛选出其他选项。我已经设置了一个基本的fiddle来复制我的结构:-在真实版本中,每个对象都将由JSON提供 我看过一些教程,我认为ko.utils.arrayfilter可能是我需要的解决方案,我也认为最好的方法可能是在我的对象中包含一个过滤函数,如下所示。但这两种观点都可能是错误的 var colo
var colorFilters = [
{id:"1", color: "white", filter: function(product){return product.color == "white";}},
{id:"2", color: "black", filter: function(product){return product.color == "black";}},
{id:"3", color: "blue", filter: function(product){return product.color == "blue";}}
];
使此功能正常工作的最佳方法是什么?不用说,我只是想了解一下Knockout,尽管我在网上找到的一些例子看起来很棒,但我仍在努力研究如何将它们复制到我自己的项目中
谢谢
更新
为了进一步说明我的问题,我复制了我使用jQuery寻找的功能:-是否有更好/更高性能的方法使用敲除来处理此问题?不确定这是否是“最佳”方法,但如果可以在筛选对象中使用筛选函数,则可以执行类似操作
var viewModel = function () {
var self = this;
var products = [
{title:"Product 1", price: 100, color: "white"},
{title:"Product 2", price: 200, color: "black"},
{title:"Product 3", price: 200, color: "blue"},
{title:"Product 4", price: 400, color: "white"},
{title:"Product 5", price: 400, color: "blue"}
];
self.allProducts = ko.observableArray(products);
self.filteredProducts = ko.observableArray(products);
var colorFilters = [
{id:"1", color: "white", filter: function(product){return product.color == "white";}},
{id:"2", color: "black", filter: function(product){return product.color == "black";}},
{id:"3", color: "blue", filter: function(product){return product.color == "blue";}}
];
self.allColors = ko.observableArray(colorFilters);
var priceFilters = [
{id:"1", price: 100,filter: function(product){return product.price == 100;}},
{id:"2", price: 200,filter: function(product){return product.price == 200;}},
{id:"3", price: 400,filter: function(product){return product.price == 400;}}
];
self.allPrices = ko.observableArray(priceFilters);
self.selectedFilters = ko.observableArray();
self.addFilter = function(filter){
if(self.selectedFilters.indexOf(filter)==-1)
self.selectedFilters.push(filter);
else self.selectedFilters.remove(filter);
updateProducts();
return true;
};
function updateProducts(){
var p = [];
if(self.selectedFilters().length==0)
return self.filteredProducts(self.allProducts());
ko.utils.arrayForEach(self.allProducts(), function(product){
//apply filters
ko.utils.arrayForEach(self.selectedFilters(), function(filter){
if(filter.filter(product) && p.indexOf(product)==-1)
p.push(product);
});
});
self.filteredProducts(p);
}
};
ko.applyBindings(new viewModel());
JSFIDLE:(显示带有任何过滤器的产品)
更新
jsiddle:(显示与
价格和颜色过滤器匹配的产品)过滤最好使用computeds完成
var colorFilters = ['white','black','blue'];
this.allColors = ko.observableArray(colorFilters);
this.selectedColors = ko.observableArray();
this.filteredProducts = ko.computed(function () {
var self = this;
if (self.selectedColors().length == 0) return this.allProducts();
return ko.utils.arrayFilter(this.allProducts(), function (product) {
return self.selectedColors().indexOf(product.color) >= 0;
}, this);
}, this);
我已经完成了颜色过滤,并将价格过滤作为练习留给您。:) 准确地说,你需要用这种方法检查这里。希望这有助于让我们进一步了解任何问题。如果您选择white
&100
,它应该只显示product1
,但它也显示product4
,我相信这是不正确的。@supercool您可能是对的。这将显示具有适用于它们的“任意”过滤器的产品。所以白色/100组合将显示白色或价格为100的产品。哦,我明白了。我的错,我现在看到了。我收回我的评论:D。