无法使用 knockout 和 knockout-sortable 在正确的索引处插入对象

Question

我目前正在尝试使用 knockout-sortable 开发一个小函数，它应该按如下方式工作。

我有 3 个可观察的集合：第一个是空的可放置区域，第二个包含集合中的前 3 个项目（可见），第三个包含我的数据集的其余部分（隐藏）。当将第二个集合中的项目拖到第一个集合中时，第三个数组中与刚刚移动的项目的 "group" 属性匹配的第一个项目需要同时插入到第二个可观察对象中index 作为刚刚拖出的item。这一切似乎都有效，除了在第一个索引处从第三个数组向第二个数组添加一个项目时，它总是在数组的后面结束。我什至添加了一个 if 语句，它将使用 unshift 来解决这个问题，但它似乎不起作用。任何帮助将非常感激。这是我尝试将对象插入正确索引的代码片段。

self.GetNextItemForClass = function(group, sourceIndex) {
  var nextItem = ko.utils.arrayFirst(self.lowPriorityTasks(), function(item) {
    if (item == null)
      return null;

    return item.group() === group;
  });

  if (nextItem != null) {
    var items = self.lowPriorityTasks();
    if (sourceIndex == 0) {
      self.normalPriorityTasks.unshift(nextItem);
    } else {
      self.normalPriorityTasks.splice(sourceIndex, 1, nextItem, items[sourceIndex]);
      ko.utils.arrayRemoveItem(self.lowPriorityTasks(), nextItem);
    }
  }
}

我有一个 fiddle here 试图说明我面临的问题。

Answer 1

要在数组的第 n 个索引处插入一个 item，您需要调用：

array.splice(n, 0, item);

您正在使用 4 个参数调用 splice 函数。因此 items[sourceIndex] 正在向 normalPriorityTasks 添加一个额外的项目。

// all parameters after the 2nd get added to the array
array.splice(start, deleteCount, item1, item2, ...)

从 splice 中删除第四个参数并将函数更改为：

self.GetNextItemForClass = function(group, sourceIndex) {
  var nextItem = ko.utils.arrayFirst(self.lowPriorityTasks(), function(item) {
    if (item == null)
      return null;

    return item.group() === group;
  });

  if (nextItem != null) {
    var items = self.lowPriorityTasks();

    // splice works for zero index as well
    // remove the forth argument from this call
    self.normalPriorityTasks.splice(sourceIndex, 0, nextItem);
    self.lowPriorityTasks.remove(nextItem); // use remove
  }
}

Here's an updated fiddle

无法使用 knockout 和 knockout-sortable 在正确的索引处插入对象

Unable to insert object at correct index using knockout and knockout-sortable

javascript

knockout.js

jquery-ui-sortable

knockout-sortable