Question

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

我想将项目从一个可排序项拖放到另一个。例如，请参阅this plnkr。尝试将第一行中的一个项目拖动到第二行。底层的可观察数组已更新，但UI不一致。看起来拖放被取消了，Knockout没有按原样更新UI。

当手动指定sortables时它工作正常但是当我在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实际上是打包到底层数组。

您可以通过两种方式解决问题：

在$rawData绑定中使用$data代替sortable（http://knockoutjs.com/documentation/binding-context.html）来绑定observableArray而不是其展开的值。
< / LI>

使用包含observableArray的属性的对象数组，如：

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

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

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

1 个答案: