Knockout Computed Array 在排序时不通知订阅者

Question

我有一个剔除计算数组，它将过滤器应用于另一个可观察数组。然后我想对计算出的数组进行排序并且可以成功地做到这一点，但是在应用另一个过滤器之前，数组不会在视图中自行更新。

我尝试创建另一个使用计算值作为其数据的可观察数组，并使用新的可观察数组而不是计算数组，但这不起作用。我也尝试过订阅计算数组并获取新值并将其提供给可观察数组，但这也不起作用。可能值得注意的是，当对计算数组进行排序时，订阅者不会收到新值的通知。

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

我希望视图在排序函数更改数组顺序时更新。

Answer 1

当您调用 [].sort() 时，它会对 array 进行排序，但在 KO 的情况下，它不会更新 observable。

尝试这样做：

var sortedItems = lineVm.searchItemAccessories().sort(function(a, b){return b.itemNumber - a.itemNumber});
lineVm.sortedItemAccessories(sortedItems); // this does the update

Answer 2

还有一个更简单的解决方案。只需直接从 observable 而不是从其内容调用 .sort() 方法：

lineVm.searchItemAccessories.sort(function(a, b){return b.itemNumber - a.itemNumber})

这是工作示例：

const testArray = ko.observableArray([8,2,7,3,1,4,6,9,5]);
testArray.subscribe(newVal=>console.log('Array updated:',newVal.join(',')));
testArray.sort();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

Knockout Computed Array 在排序时不通知订阅者

Knockout Computed Array does not notify subscribers when sorted

javascript

knockout.js