无法在 foreach 中将项目从一个可排序项拖放到另一个可排序项

Question

我正在使用knockout/jquery-ui/knockout-sortable。

我想将项目从一个可排序项拖放到另一个可排序项。看 这个 plnkr 例如。尝试将一个项目从第一行拖到第二行。底层可观察数组已更新，但 UI 不一致。看起来拖放操作已被取消，并且 Knockout 没有按应有的方式更新 UI。

当手动指定可排序时它工作正常，但当我在 foreach 绑定内创建它们时它停止工作。有人知道我做错了什么吗？

JavaScript：

  $(function() {
      viewModel = {
        firstItems : ko.observableArray(["Item 1", "Item 2", "Item 3", "Item 4"]),
        secondItems : ko.observableArray(["Item A", "Item B", "Item C", "Item D"]),
        thirdItems : ko.observableArray(["Item W", "Item X", "Item Y", "Item Z"])
      };

      viewModel.allItems = ko.observableArray([viewModel.firstItems, viewModel.secondItems, viewModel.thirdItems]);

      ko.applyBindings(viewModel);
  });

标记：

<div id="rows" data-bind="foreach: allItems">

  <ul class="row" data-bind="sortable: $data">
    <li data-bind="text: $data"></li>
  </ul>

</div>

Answer 1

这 sortable 插件期望处理一个 observableArray。在你的情况下，基于这样的方式 foreach 作品， $data 实际上已解包到底层数组。

有两种方法可以修复它：

1. 使用 $rawData 代替 $data (http://knockoutjs.com/documentation/binding-context.html） 在里面 sortable 绑定绑定到 observableArray 而不是它的未包装值。

2. 使用具有包含 observableArray 属性的对象数组，例如：

   viewModel.allItems = ko.observableArray([
       { items: viewModel.firstItems }, 
       { items: viewModel.secondItems },
       { items: viewModel.thirdItems }
   ]);
   

然后，绑定 items 而不是 $data.