可观测阵列上的基因敲除过滤 [英] Knockout Filtering on Observable Array

问题描述

这是我的模型：

我已经开始学习Knockout，并且在点击按钮时过滤可观察数组并显示结果。 / p>

 函数产品（数据）{
 this.id = data.id; 
 this.name = data.name; 
 this.price = data.price; 
 this.description = data.desc; 
 this.image = data.image; 
 this.genre = data.genre; 
 this.show = data.show; 
 this.offer_desc = data.offer_desc; 
 this.offer_id = data.offer_id; 
} 
 
函数ProductModel（）{
 var self = this; 
 self.products = ko.observableArray（[]）; 
 
 $ .getJSON（'../ PHP / Utilities.php？json = true'，function（json）{
 var mappedProducts = $ .map（json，function（item）{返回新产品（item）}）; 
 self.products（mappedProducts）; 
}）; 
 
 self.filterProducts = ko.computed（function（genre）{
 if（typeof genre ==='undefined'）{
 return self.products（）; //当没有指定类型过滤器时的初始加载
} else {
 return ko.utils.arrayFilter（self.products（），function（prod）{
 return prod.genre = genre; 
}）; 
} 
}）; 
} 
 
 ko.applyBindings（new ProductModel（））; 
  

这是html：

 < div data-bind =foreach：filterProducts> 
< div class =row> 
< div class =col-md-2> 
 < / div> 
< div class =col-md-2data-bind =text：name>< / div> 
< div class =col-md-1data-bind =text：price>< / div> 
< div class =col-md-3data-bind =text：description>< / div> 
< div class =col-md-1data-bind ='text：offer_id'> 
< div class =col-md-2data-bind =text：genre>< / div> 
< div class =col-md-1data-bind =text：show>< / div> 
< / div> 
< / div> 
  

我也不确定如何绑定点击功能来过滤类型上的产品。我以为像这样...但它不工作

 < button data-bind =click：filter（ '1'）>过滤< /按钮> 
 
 self.filter = function（genre）{
 self.filterProducts（genre）; 
 
  

解决方案

参数在 ko.computed 中。

您需要将当前过滤器存储在新的属性中，在你计算的

$ p $函数ProductModel（）{
var self = this;
self.products = ko.observableArray（[]）;

self.currentFilter = ko.observable（）; //存储过滤器的属性

...

self.filterProducts = ko.computed（function（）{
if（！self.currentFilter （））{
return self.products（）;
} else {
return ko.utils.arrayFilter（self.products（），function（prod）{
return prod .genre == self.currentFilter（）;
}）;
}
}）;

$ / code>

然后在点击处理程序只是设置当前的过滤器：

 < button data-bind =click：function（）{filter（'1 '）}>过滤< /按钮> 
 
 self.filter = function（genre）{
 self.currentFilter（genre）; 
} 
  

演示 JSFiddle

请注意函数（）{} 在中单击绑定（参见文档 a>），否则Knockout会在解析绑定时执行你的函数，而不是当你点击按钮时。

I've started learning Knockout and I'm having some trouble filtering an observable array on a button click and displaying the results.

This is my model:

function Product(data) {     
    this.id = data.id;
    this.name = data.name;
    this.price = data.price;
    this.description = data.desc;
    this.image = data.image;
    this.genre = data.genre;
    this.show = data.show;
    this.offer_desc = data.offer_desc;
    this.offer_id = data.offer_id;
}

function ProductModel() {
    var self = this;
    self.products = ko.observableArray([]);

    $.getJSON('../PHP/Utilities.php?json=true', function(json) {
       var mappedProducts = $.map(json, function(item) { return new Product(item) });
       self.products(mappedProducts);
    });

    self.filterProducts = ko.computed(function(genre) {
        if(typeof genre === 'undefined') {
            return self.products(); //initial load when no genre filter is specified
        } else {
            return ko.utils.arrayFilter(self.products(), function(prod) {
                return prod.genre = genre;
            });
        }
    });
}

ko.applyBindings(new ProductModel());

This is the html:

<div data-bind="foreach: filterProducts">
    <div class="row">
        <div class="col-md-2">
        <img data-bind="attr:{src: '../images/' + image, alt: name}" />
        </div>
        <div class="col-md-2" data-bind="text: name"></div>
        <div class="col-md-1" data-bind="text: price"></div>
        <div class="col-md-3" data-bind="text: description"></div>
        <div class="col-md-1" data-bind='text: offer_id'>                  
        <div class="col-md-2" data-bind="text: genre"></div>
        <div class="col-md-1" data-bind="text: show"></div>
    </div>
</div>

I'm also not sure how to bind a click function to filter the products on genre. I thought something like this...but it doesn't work

<button data-bind="click: filter('1')"> Filter </button>

self.filter = function(genre) {
    self.filterProducts(genre);
}

解决方案

You cannot have a function with parameters inside a ko.computed.

What you need is store the current filter in a new property and use that in your computed

function ProductModel() {
    var self = this;
    self.products = ko.observableArray([]);

    self.currentFilter = ko.observable(); // property to store the filter

    //...

    self.filterProducts = ko.computed(function() {
        if(!self.currentFilter()) {
            return self.products(); 
        } else {
            return ko.utils.arrayFilter(self.products(), function(prod) {
                return prod.genre == self.currentFilter();
            });
        }
    });
}

And in your click handler just set the current filter:

<button data-bind="click: function() { filter('1') }"> Filter </button>

self.filter = function(genre) {
    self.currentFilter(genre);
}

Demo JSFiddle

Note the function() { } in needed if you want to pass additional arguments a in click binding (see also in the documentation), otherwise Knockout would execute your function when it parses the binding and not when you click on the button.

这篇关于可观测阵列上的基因敲除过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！