javascript - 使用 Knockout-sortable 拖动 observableArray 项目时出现滞后

Question

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

• 查看模型
  • 巴士
    • 席位

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

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

测试页面加载一组初始数据(三辆公共(public)汽车，两辆有座位)，一切运行顺利 - 座位可以毫无问题地重新排序。 但是，单击“添加巴士”按钮(模拟服务器刷新并加载第一辆巴士(890 号)的座位)后，拖动该特定巴士的座位时会出现轻微的延迟。 这似乎与事后将这些座位添加到巴士上的方式有关，因为另外两辆巴士上的座位仍然可以顺利拖动。

我在代码本身中没有发现任何性能问题，并且在 Chrome 中运行配置文件和时间线工具并拖动图像只会显示大量噪音(重新绘制、重新计算样式、鼠标移动事件)。我怀疑我对 Knockout 可观察量做了错误的操作，但我找不到它。

Demo Page

Answer 1

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

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

与:

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

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