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

Question

I have a single page application that provides an administrative UI for seating on buses. It periodically receives updated data from the server, which is incorporated into a Knockout view model (using observables and observable arrays). The structure looks like this:

• View Model
  • Buses
    • Seats

It uses the knockout-sortable plug-in to allow the user to drag the seats around to change their order.

For various reasons (performance among them), the data from the server is sent as diffs, and the client code merges each update into the single persistent view model rather than just blowing it away and rebuilding it with each refresh.

The test page loads an initial set of data (three buses, two with seats) and everything runs smoothly -- the seats can be reordered with no problems. However, after clicking the "Add Bus" button (which simulates a refresh from the server and loads the seats for the first bus -- number 890), there is a slight lag when dragging the seats around for that particular bus. It appears to be related to the way in which those seats were added to the bus after the fact, as the seats on the other two buses can still be dragged smoothly.

I haven't found any performance issues in my code itself, and running the profile and timeline tools in Chrome with dragging the images just shows a lot of noise (repaints, recalculated styles, mouse move events). I suspect that I'm doing something incorrectly with the Knockout observables, but I can't find it.

Demo Page

Answer 1

Looks like you can either ensure that there is a "dummy" item to start with and them remove it immediately after applying bindings or a potential workaround would be to get access to the widget and set floating to true.

Something like: sortable: {data: Seats, connectClass: false, options: { activate: setFloating } }

with:

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

Both seem like a workaround, but seem to make it work properly.