javascript - 使用 Knockout JS 对列表中的项目重新排序

Question

我有一个可观察的项目数组。 “项目”的属性之一是“位置”，它表示该项目在列表中的位置。我希望能够通过每个项目旁边的位置下拉列表来重新排序页面上的项目。当用户在下拉列表中选择某个项目的位置时，任何受影响的项目的位置值都会重新计算。

我遇到的问题是当我尝试使用下拉菜单的事件绑定(bind)时 - 我无法找到将原始位置和新位置传递给“重新定位”函数的方法。

我确信这可以通过在这个简单的示例中使用数组索引来完成，但我正在尝试看看是否可以避免这种情况。

JSFiddle:http://jsfiddle.net/4tqahpkg/3/

<div class='liveExample'>
<ul data-bind="foreach: orderedItems">
    <li>
        <div>   <span data-bind="text: name"> </span> has Position:
            <select id="pos" data-bind=" options: orderedItems,
                    optionsText: function(item) { return item.position   },
                    optionsValue: function(item){ return item.position   },
                    value: position,
                    event: { change: function () {reposition($data.name(), position()); } } "></select>
        </div>
    </li>
</ul>

var Item = function (name, position) {
    this.name = ko.observable(name);
    this.position = ko.observable(position);

}

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

    this.items = [
    new Item("item Three", "3"),
    new Item("item One", "1"),
    new Item("item Two", "2"),
    new Item("item Five", "5"),
    new Item("item Four", "4"),
    new Item("item Six", "6")];


    self.orderedItems = ko.computed(function () {

        return ko.utils.arrayFilter(this.items, function (item) {
            return true;
        }).sort(function (a, b) {
            var value1 = "",
                value2 = "";
            value1 = a.position() ? a.position() : "";
            value2 = b.position() ? b.position() : "";
            return value1 == value2 ? 0 : (value1 < value2 ? -1 : 1);
        });
    });

    self.curName = ko.observable();

    self.curItem = ko.computed(function (name) {
        return ko.utils.arrayFilter(this.items, function (item) {
            return item.name() == self.curName();
        });
    });

    self.reposition = function (name, newPosition) {

        self.curName(name);
        origPosition = self.curItem()[0].position();

        if (origPosition < newPosition) {
            for (var x = 0; x < orderedItems.length; x++) {
                if (origPosition < newPosition && self.orderedItems()[x].position() >= origPosition && self.orderedItems()[x].position() < newPosition) {
                    self.orderedItems()[x].position(self.orderedItems()[x].position() - 1);
                }

                if (origPosition > newPosition && self.orderedItems()[x].position() >= newPosition && self.orderedItems()[x].position() < origPosition) {
                    self.orderedItems()[x].position(self.orderedItems()[x].position() + 1);
                }

                if (self.orderedItems().name() == name) {
                    self.orderedItems()[x].position(newPosition);
                }
            }
        }
    };


};

ko.applyBindings(viewModel);

Answer 1

您想要访问旧位置，但尚未为其定义任何存储。每个项目都必须有一个 oldPosition 变量(我已经创建了一个私有(private)变量)，并且对 position 进行了订阅，该订阅在更新 oldPosition 之前调用您的 reposition 函数。

我对你的设计做了一些重新架构，我认为这有点复杂。我还没有实现重新定位，我猜您想移动其他项目的位置，这样就不会出现重复项。

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

  var Item = function(name, pos) {
    this.name = ko.observable(name);
    this.position = ko.observable(pos);
    var oldPosition = pos;
    this.position.subscribe(function(newValue) {
      self.reposition(this, oldPosition, newValue);
      oldPosition = newValue;
    }, this);
  };

  this.items = [
    new Item("item Three", "3"),
    new Item("item One", "1"),
    new Item("item Two", "2"),
    new Item("item Five", "5"),
    new Item("item Four", "4"),
    new Item("item Six", "6")
  ];


  self.orderedItems = ko.computed(function() {
    return ko.utils.arrayFilter(this.items, function(item) {
      return true;
    }).sort(function(a, b) {
      return a.position() - b.position();
    });
  });

  self.curName = ko.observable();

  self.reposition = function(item, oldPosition, newPosition) {
    console.debug("Reposition", item, oldPosition, newPosition);
  };

};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='liveExample'>
  <ul data-bind="foreach: orderedItems">
    <li>
      <div>	<span data-bind="text: name"> </span> has Position:
        <select id="pos" data-bind=" options: orderedItems,
						optionsText: 'position',
						optionsValue: 'position',
						value: position "></select>
      </div>
    </li>
  </ul>
</div>