对可观察数组的剔除过滤 [英] Knockout Filtering on Observable Array

问题描述

我已经开始学习 Knockout，但在单击按钮时过滤可观察数组并显示结果时遇到了一些问题.

这是我的模型:

function Product(data) {this.id = 数据.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;}功能产品模型(){var self = this;self.products = ko.observableArray([]);$.getJSON('../PHP/Utilities.php?json=true', function(json) {var mappingProducts = $.map(json, function(item) { return new Product(item) });self.products(mappedProducts);});self.filterProducts = ko.computed(function(genre) {如果(类型类型 === '未定义'){返回 self.products();//未指定流派过滤器时的初始加载} 别的 {返回 ko.utils.arrayFilter(self.products(), function(prod) {返回 prod.genre = 类型；});}});}ko.applyBindings(new ProductModel());

这是html:

<div class="row"><div class="col-md-2"><img data-bind="attr:{src: '../images/' + image, alt: name}"/>
<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>

我也不知道如何绑定点击功能来过滤类型的产品.我想过这样的事情......但它不起作用

过滤器</button>self.filter = 函数(流派){self.filterProducts(流派);}

解决方案

ko.computed 中不能有带参数的函数.

您需要的是将当前过滤器存储在一个新属性中并在您的计算中使用它

function ProductModel() {var self = this;self.products = ko.observableArray([]);self.currentFilter = ko.observable();//存储过滤器的属性//...self.filterProducts = ko.computed(function() {if(!self.currentFilter()) {返回 self.products();} 别的 {返回 ko.utils.arrayFilter(self.products(), function(prod) {返回 prod.genre == self.currentFilter();});}});}

并在您的 click 处理程序中设置当前过滤器:

过滤器</button>self.filter = 函数(流派){self.currentFilter(流派);}

演示 JSFiddle

如果您想在 click 绑定中传递额外的参数 a，请注意需要的 function() { }(另请参见 documentation)，否则 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屋！