淘汰产品过滤
Knockout product filtering
我正在尝试使用Knockout创建一个产品过滤系统。我将接收单独的JSON文件—一个包含产品(和所有相关属性),另一个单独的文件用于每个单独的过滤器。我需要在页面加载时显示所有结果,然后使用过滤器复选框过滤掉其他选项。我已经设置了一个基本的小提琴来复制我的结构:http://jsfiddle.net/nimaek/0kbmchxe/4/-在实际版本中,每个对象都将从JSON提供。
我看了一些教程,我认为ko.utils.arrayfilter可能是我需要的解决方案-我也认为最好的方法可能是在我的对象中包含一个过滤函数,如下所示。但这两种想法都可能是错误的。
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寻找的功能:http://jsfiddle.net/nimaek/0kbmchxe/6/-是否有更好/更高性能的方法来处理这个使用Knockout?
过滤最好使用计算机。
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);
我已经更新了你的小提琴与颜色过滤,并留下价格过滤作为练习给你。:)
不确定这是否是"最佳"方法,但如果您可以在过滤器对象中使用过滤器函数,那么您可以这样做。
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());
jsFiddle: http://jsfiddle.net/newuserjs/4722mLch/(显示带有任何过滤器的产品)
jsFiddle: http://jsfiddle.net/newuserjs/4722mLch/2/(显示同时匹配price
和 color
过滤器的产品)
- 有可能过滤来自嵌入式YouTube的声音吗
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 淘汰搜索/筛选
- 消息显示之外的淘汰验证
- 淘汰映射;不起作用
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 如何正确引用传递到淘汰中的当前元素的属性.JS
- Angular:使用选择列表选择过滤代码中的对象
- 在单击时过滤 JSON
- 如何在BookshelfJS中通过加入来过滤结果
- 如何使用javascript过滤复杂的json对象
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 过滤AngularJs中的数据
- 通过API调用过滤数据
- 使用angularjs内置过滤器过滤代码中的特定属性
- 什么是淘汰赛中的根管理员.js以及它指向什么
- 可排序和可丢弃的淘汰列表
- 自定义过滤淘汰js observableArray
- 过滤淘汰可观察数组时没有数据存在
- 淘汰产品过滤