如何根据每个数组中的某个项目对 Observable 数组进行排序

How to sort an Observable Array based on a certain item inside each Array

我有一个 Observable 数组,里面有数组,每个数组里面都有一个项目叫做 'time'。我将如何对我的可观察数组中的数组进行排序,以便它们根据项目的值从低到高按顺序排列。这些值采用 Hour:Minute:Second 格式。

function viewModel() {
  var self = this;
  
  self.myObservable = ko.observableArray([
  {time: "01:00:00", name: 'frank'},
  {time: "05:30:00", name: 'bob'},
  {time: "03:00:00", name: 'bill'},
  {time: "00:00:21", name: 'john'},
  {time: "00:12:00", name: 'paul'}
  ])
}

您应该使用 sort() 函数。

    self.myObservable.sort(function (left, right) {
        return left.age === right.age ? 0
             : left.age < right.age ? -1
             : 1;
    });

淘汰赛有built-in methods for observableArray which work similar to Array.prototype. You can sort it by using localeCompare

function viewModel() {
  var self = this;

  self.myObservable = ko.observableArray([
      { time: "01:00:00", name: 'frank' },
      { time: "05:30:00", name: 'bob' },
      { time: "03:00:00", name: 'bill' },
      { time: "00:00:21", name: 'john' },
      { time: "00:12:00", name: 'paul' }
    ]);

  self.sort = function() {
    self.myObservable.sort((a, b) => a.time.localeCompare(b.time))
  }
}

ko.applyBindings(new viewModel)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: myObservable -->
  <span data-bind="text: time"></span><br>
<!-- /ko -->

<button data-bind="click: sort">Sort</button>