使用 knockout js 在单击选项上上下移动数组值？

Question

我是 knockoutjs 的新手，我看到了一个示例，它通过 selecting 选项中索引的下拉值来上下移动数组值。但它的问题是他们没有正确移动值。更改 select 框中的数组位置选项后将更改..

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>

这是我的示例代码，我想显示数组索引位置应该显示在下拉列表中。我想 select 下拉列表中的索引值数组值的位置应该改变但不是选项。怎么可能用knockout js.

Answer 1

所以这个比正常情况要棘手一些，因为您的索引基于项目的属性。这并没有错，只是增加了更多的复杂性。

首先你必须创建 "indexes" 的数组，因为你实际上并没有改变项目的索引，它们只是根据位置属性.

计算出来的

this.items() 已更改为 observableArray 以 propagate/bubble 将项目更改为其他功能。现在您可以包含一个 "Add Item" 功能，将其添加到项目数组中，所有内容都会正确更新。

我删除了 Item 构造函数中的订阅函数，它在不需要时触发了太多问题。相反，我将事件处理程序附加到可以管理项目的 select 框，并通过获取 value().

删除了值的双向绑定

希望这对您有所帮助，祝您好运！

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

  // UPDATED: Removed the subscribe function
  var Item = function(name, pos) {
    this.name = ko.observable(name);
    this.position = ko.observable(pos);
  };

  // UPDATED: Changed to observable so you can change items here and it will propogate down to the computed functions
  this.items = ko.observable([
    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")
  ]);
  
  // ADDED: Create array of index options based on length
  this.positions = ko.computed(function(){
    var numArray = [];
    for(i = 0; i < self.items().length; i++) {
      numArray.push(i + 1)
    }
    return numArray;
  })


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

  self.curName = ko.observable();

  /**
  * UPDATED: Get item at selected position, change it to the current 
  * items position, then update current items position to the selected position;
  */
  self.reposition = function(item, event) {
    var selectedPosition = event.target.value;
    var itemAtPosition = ko.utils.arrayFirst(self.items(), function(i){
      return i.position() === selectedPosition;
    })
    itemAtPosition.position(item.position());
    item.position(event.target.value)
  };

};

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: positions(),
          value: position(), event: { change: reposition} "></select>
      </div>
    </li>
  </ul>
</div>

使用 knockout js 在单击选项上上下移动数组值？

move up and down array values on click options using knockout js?

javascript

jquery

knockout.js