KnockoutJS / jQuery UI Sortable 冲突问题

Question

我试图同时使用KnockoutJS和jQuery UI Sortable。我知道这已经做过了(特别是knockout-sortable)，但我的用例有一些非常特定的行为，希望避免尝试进行切换。

无论如何，问题非常简单——在使用jQuery UI Sortable移动DOM元素后，当删除绑定到该DOM元素的observableArray元素时，Knockout会表现出奇怪的行为。它将无法删除移动的元素，并且如果掉落到移动的元素位置的元素被删除，它将同时删除那个元素和最初移动的元素。很难用言语表达，但通过this fiddle演示。

问题似乎实际上发生在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 (e.g., 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));
    }
}

这个调用将移动的DOM元素添加到要在移动元素被删除时删除的元素列表中。

因此，对于任何jQuery UI / Knockoutjs天才，是否有一种方法来解决这个冲突，或者我需要完全采取不同的方法来使这些工具和谐地协作？

- Joel

Answer 1

我认为“最佳”解决方案是从DOM中删除该元素并在KO中更改其位置。您可以在可排序的stop事件中执行此操作。http://jsfiddle.net/vgrTY/4/

我已经将您的array-contents文本也更改为计算属性，这样它就可以正确显示。

- Royce Feng