使用Knockout-sortable拖动observableArray项时滞后

Question

我有一个单页面应用程序，提供在公交车上座位的管理UI。 它定期从服务器接收更新的数据，该数据被合并到Knockout视图模型中（使用可观察数据和可观察数组）。 结构如下所示：

• 查看模型
  • 公共汽车
    • 座位

它使用可拆卸的可拆卸插件，允许用户拖动座椅以改变其顺序。

由于各种原因（其中的性能），来自服务器的数据作为差异发送，客户端代码将每个更新合并到单个持久视图模型中，而不是将其吹走并在每次刷新时重建它。

测试页面加载一组初始数据（三辆公共汽车，两辆带座位），一切运行顺畅 - 座椅可以重新排序，没有任何问题。 但是，在单击“添加总线”按钮（模拟来自服务器的刷新并加载第一条总线的座位 - 编号890）后，拖动该特定总线的座位时会有轻微的延迟。 这事实似乎与这些座位加入公交车的方式有关，因为其他两辆公共汽车的座位仍然可以顺利拖动。

我在代码本身中没有发现任何性能问题，并且在Chrome中运行配置文件和时间线工具拖动图像只会显示很多噪音（重新绘制，重新计算的样式，鼠标移动事件）。 我怀疑我正在使用Knockout observable做错事，但我找不到它。

演示页面

Answer 1

看起来你可以确保有一个“虚拟”项目开始，并在应用绑定后立即将其删除，或者可能的解决方法是访问窗口小部件并将floating设置为true。

类似于： sortable: {data: Seats, connectClass: false, options: { activate: setFloating } }

有：

setFloating: function() {
  $(this).data("uiSortable").floating = true;
}

两者似乎都是一种解决方法，但似乎使其正常工作。