knockout.js - 循环和重新排序 Observable 数组

Question

我正在使用以下函数根据称为 sort 的整数值对 observableArray 进行排序：

model.sortColumns = function (a, b) {
  return a.Order > b.Order ? 1 : -1;
};

model.sortedColumns = ko.dependentObservable(function () {
  return this.reportFields.slice().sort(this.sortColumns);
}, model);

我正在使用 foreach 在屏幕上显示它们并且一切正常，但我现在需要做的是在 foreach 中提供更改顺序的能力。我打算用点击事件放置简单的向上/向下箭头图标，但我不知道如何去改变它，以前有没有人做过这样的事情？

Answer 1

这是一篇关于排序和排序的精彩文章：http ://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html

在本文中，所有魔法都是通过使用自定义绑定完成的：

  ko.bindingHandlers.sortableList = {
      init: function(element, valueAccessor) {
          var list = valueAccessor();
          $(element).sortable({
              update: function(event, ui) {
                  //retrieve our actual data item
                  var item = ui.item.tmplItem().data;
                  //figure out its new position
                  var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                  //remove the item and add it back in the right spot
                  if (position >= 0) {
                      list.remove(item);
                      list.splice(position, 0, item);
                  }
              }
          });
      }
  };

<div data-bind="foreach: sortedColumns, sortableList: sortedColumns"></div>