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

Question

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

• 查看模型
  • 巴士
    • 座位

它使用可淘汰排序插件允许用户拖动座位来改变他们的顺序。

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

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

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

Demo Page

Answer 1

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

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

与：

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

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