在 jQuery UI 可排序后，Knockout foreach 绑定不起作用

Question

我有一堆通过 foreach 绑定更新的行。而且我还有一个自定义的敲除绑定（基于 jQuery UI 可排序），它允许通过拖放重新排序这些行。

<tbody data-bind="foreach: serviceTemplates, draggableList: null">
  <tr>...</tr>
</tbody>

ko.bindingHandlers.draggableList = {
  init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    var panelList = $(element);
    panelList.sortable();
  }
};

可以删除行。只有当我不移动这一行时它才有效。我不理解为什么。 jQuery UI 是否在移动时删除和添加 DOM 元素？

Example

Answer 1

试试knockout-sortable。您所要做的就是在您的项目中包含knockout-sortable.js 文件并将foreach 替换为sortable。

<tbody data-bind="sortable: serviceTemplates, draggableList: null">
    <tr>...</tr>
</tbody>