CODEWITHSUNDEEP
jquery-uiknockout.js
Daniel A. White
Daniel A. White

Reputation: 191058

Knockout custom binding for jQuery UI Sortable - strange behavior

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?

Upvotes: 8

Views: 6154

Answers (2)

Roumelis George
Roumelis George

Reputation: 6746

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

Upvotes: 1

RP Niemeyer
RP Niemeyer

Reputation: 114792

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

Upvotes: 30

Related Questions