JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<ul data-bind="foreach: numbers">
  <li>
    <span data-bind="text: $data"></span>
    <button data-bind="click: $parent.moveUp">Move Up</button>
    <button data-bind="click: $parent.moveDown">Move down</button>
  </li>
</ul>

JavaScript

function ViewModel() {
  var _this = this;
  _this.numbers = ko.observableArray(["a", "b", "c", "d", "e"]);

  _this.moveDown = function(number) {
    var i = _this.numbers().indexOf(number);
    console.log(i)
    if (i < _this.numbers().length - 1) {
      var rawNumbers = _this.numbers();
      _this.numbers.splice(i, 2, rawNumbers[i + 1], rawNumbers[i]);
    }
  }
  _this.moveUp = function(number) {
    var i = _this.numbers().indexOf(number);
    if (0 < i) {
      var rawNumbers = _this.numbers();
      _this.numbers.splice(i - 1, 2, rawNumbers[i], rawNumbers[i - 1]);
    }
  }
}

var vm = new ViewModel();
ko.applyBindings(vm);