Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout Computed Array does not notify subscribers when sorted

I have a knockout computed array that applies a filter to another observable array. I then want to sort the computed array and can successfully do this, but the array does not update on its own in the view until another filter is applied.

I have tried creating another observable array that uses the computed value as its data and using that new observable array instead of the computed array, but that does not work. I have also tried subscribing to the computed array and taking the new value and giving it to the observable array, but that also does not work. It is probably worth noting that when the computed array is sorted the subscribers are not notified of a new value.

  this.itemAccessories = ko.observableArray()
  this.sortedItemAccessories = ko.observableArray()
  this.searchItemAccessories = ko.computed(function() {
    let q = this.searchAccessories()
    if(q){
      return ko.utils.arrayFilter(this.itemAccessories(), function(i) {
        return i.itemNumber.toLowerCase().indexOf(q.toLowerCase()) >= 0
      })
    }
    else {
      return this.itemAccessories()
    }
  })
  this.searchItemAccessories.subscribe((value) => {
    if(value) {
      this.sortedItemAccessories(value)
    }
  })
  lineVm.searchItemAccessories().sort(function(a, b){return b.itemNumber -
  a.itemNumber})

I expect the view to update when the sort function changes the order of the array.

like image 987
everydayprogrammer Avatar asked Jan 21 '26 02:01

everydayprogrammer


1 Answers

When you call [].sort(), it sorts the array, but in the case of KO, it doesn't update the observable.

Try doing this instead:

var sortedItems = lineVm.searchItemAccessories().sort(function(a, b){return b.itemNumber - a.itemNumber});
lineVm.sortedItemAccessories(sortedItems); // this does the update
like image 76
Shahzad Avatar answered Jan 22 '26 16:01

Shahzad