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

Question

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

• 视图模型
  • 总线
    • 座位

​

​

它使用可剔除的可排序插件来允许用户拖动座椅来改变他们的顺序。

由于各种原因(其中的性能)，来自服务器的数据被发送为diffs，客户端代码将每个更新合并到单个持久视图模型中，而不是仅仅通过每次刷新将其吹走并重新构建。

测试页面加载了一组初始数据(三辆巴士，两辆带座位的巴士)，一切运行都很顺利--座位可以毫无问题地重新排序。然而，在单击"Add Bus“按钮(模拟服务器刷新并加载第一辆巴士的座位--编号890)之后，在为该特定巴士拖曳座位时，会出现轻微的滞后。似乎与在事实发生后将这些座位添加到总线上的方式有关，因为其他两辆巴士上的座位仍然可以平稳地拖动。

我在代码本身中没有发现任何性能问题，在Chrome中运行配置文件和时间线工具拖动图像只会显示大量噪音(重新绘制、重新计算样式、鼠标移动事件)。我怀疑我对“淘汰赛”的观测器做错了什么，但我找不到。

演示页

Answer 1

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

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

通过以下方式：

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

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