我有一个单页应用程序,它提供了公交车座位的管理 UI。它定期从服务器接收更新的数据,这些数据被合并到 Knockout View 模型中(使用 observables 和 observable 数组)。结构如下所示:
- 查看模型
- 巴士
- 席位
- 巴士
它使用knockout-sortable插件来允许用户拖动座位来改变他们的顺序。
出于各种原因(其中包括性能),来自服务器的数据作为差异发送,客户端代码将每个更新合并到单个持久 View 模型中,而不是只是将其清除并在每次刷新时重建它。
测试页面加载一组初始数据(三辆公共(public)汽车,两辆有座位),一切运行顺利 - 座位可以毫无问题地重新排序。 但是,单击“添加巴士”按钮(模拟服务器刷新并加载第一辆巴士(890 号)的座位)后,拖动该特定巴士的座位时会出现轻微的延迟。 这似乎与事后将这些座位添加到巴士上的方式有关,因为另外两辆巴士上的座位仍然可以顺利拖动。
我在代码本身中没有发现任何性能问题,并且在 Chrome 中运行配置文件和时间线工具并拖动图像只会显示大量噪音(重新绘制、重新计算样式、鼠标移动事件)。我怀疑我对 Knockout 可观察量做了错误的操作,但我找不到它。
最佳答案
看起来您可以确保有一个“虚拟”项目开始,并在应用绑定(bind)后立即将其删除,或者潜在的解决方法是访问小部件并设置 float
为真。
类似于:sortable: {data: Seats, connectClass: false, options: { activate: setFloating } }
与:
setFloating: function() {
$(this).data("uiSortable").floating = true;
}
两者似乎都是一种解决方法,但似乎都能使其正常工作。
关于javascript - 使用 Knockout-sortable 拖动 observableArray 项目时出现滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20942511/