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

Question

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

• 查看模型
  • 总线
    • 座椅

它使用knockout-sortable插件允许用户拖动座位以改变他们的顺序。

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

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

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

Demo Page

Answer 1

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

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

使用：

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

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