Knockout custom binding for jQuery UI Sortable - strange behavior

Question

I\'m using jQuery Sortable and Knockout to maintain an array.

http://jsfiddle.net/daniel_white/KrGY8/3/

Notice when you drag the items, they duplicate or disappe

Answer 1

KO's mapping of items gets a little messed up based on empty text nodes when you are moving things around using jQuery UI sortable.

You can either eliminate the text nodes in your "template" like: http://jsfiddle.net/rniemeyer/KrGY8/5/

Or remove the existing item and put it back to the right spot in two steps (updating the observableArray twice): http://jsfiddle.net/rniemeyer/KrGY8/4/

I also wrote a binding plugin to work with jQuery sortable in Knockout that provides some additional features here: https://github.com/rniemeyer/knockout-sortable

Answer 2

An easy way to work around this problem is to first clear your binded observableArray, like this:

list([]);

Then updated it with the correct array:

list(actualArray);

Check the updated fiddle