https://stackoverflow.com/questions/75845300

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<button data-bind="click: reverseItems">
Reverse
</button>
<button data-bind="click: sortItems">
Sort
</button>
<ul data-bind="foreach: items">
  <li data-bind="text: value"></li>

</ul>

JavaScript

var viewModel = function () {
  var self = this;

  self.items = ko.observableArray([
    { name: "Item 1", value: 1 },
    { name: "Item 2", value: 2 },
    { name: "Item 3", value: 3 },
  ]);

  self.addItem = function () {
    self.items.push({ name: "New Item", value: self.items().length + 1 });
  };

  self.removeItem = function (item) {
    self.items.remove(item);
  };

  self.sortItems = function () {
    self.items.sort(function (a, b) {
      return a.value - b.value;
    });
  };

  self.reverseItems = function () {
    self.items.reverse();
  };
};

ko.applyBindings(new viewModel());