I am trying to use KnockoutJS and jQuery UI Sortable together. I know that this was done before (in particular, knockout-sortable ), but my use case has quite specific behavior, and I hope to avoid trying to make a switch.
In any case, the problem is quite simple - after moving the DOM element using the JQuery UI Sortable, Knockout behaves strangely when you delete the element of the observed element associated with this DOM element. It will not delete the moved item, and if the item that fell into the place of the moved item is deleted, it will delete both this and the originally moved item. It is hard to put into words, but demonstrated this script .
The problem, apparently, takes place in the following block in knockout-2.1.0.js:
function fixUpVirtualElements(contiguousNodeArray) { // Ensures that contiguousNodeArray really *is* an array of contiguous siblings, even if some of the interior // ones have changed since your array was first built (eg, because your array contains virtual elements, and // their virtual children changed when binding was applied to them). // This is needed so that we can reliably remove or update the nodes corresponding to a given array item if (contiguousNodeArray.length > 2) { // Build up the actual new contiguous node set var current = contiguousNodeArray[0], last = contiguousNodeArray[contiguousNodeArray.length - 1], newContiguousSet = [current]; while (current !== last) { current = current.nextSibling; if (!current) // Won't happen, except if the developer has manually removed some DOM elements (then we're in an undefined scenario) return; newContiguousSet.push(current); } // ... then mutate the input array to match this. // (The following line replaces the contents of contiguousNodeArray with newContiguousSet) Array.prototype.splice.apply(contiguousNodeArray, [0, contiguousNodeArray.length].concat(newContiguousSet)); } }
This call adds the moved DOM element to the list of elements to be deleted when the shifted element is deleted.
So, an open call to any jQuery UI / Knockoutjs genius - is there a way to resolve this conflict, or do I need to do something completely different so that these tools play well together?
source share