Knockout Filtering on Observable Array

Question

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:

Answer 1

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:

 Filter 

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.