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 disappear.

Anyone know how I could fix this?

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