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:

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); } 

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:

<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.

Answer 2

You might want to have a look at Knockout Projections plugin from the author of original knockout. It has performance advantages in scenarios with large collections. See blogpost for more details.

self.filterProducts = self.products.filter(function(prod) {     return !self.currentFilter() || prod.genre == self.currentFilter(); });