KnockoutJS / jQuery UI 可排序冲突答案

【问题标题】：KnockoutJS / jQuery UI Sortable ConflictKnockoutJS / jQuery UI 可排序冲突
【发布时间】：2023-03-08 13:27:01
【问题描述】：

我正在尝试同时使用 KnockoutJS 和 jQuery UI Sortable。我知道这已经完成（尤其是knockout-sortable），但我的用例有一些非常具体的行为，我希望避免尝试进行切换。

无论如何，问题很简单——在使用 jQuery UI Sortable 移动一个 DOM 元素后，Knockout 在删除绑定到该 DOM 元素的 observableArray 元素时会出现奇怪的行为。它将无法删除被移动的元素，并且如果落入被移动元素的位置的元素被删除，它将同时删除该元素和最初移动的元素。难以言表，但由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 天才 - 有没有办法解决这个冲突，还是我需要做一些完全不同的事情来让这些工具很好地协同工作？

【问题讨论】：

标签： javascript jquery-ui dom knockout.js jquery-ui-sortable

【解决方案1】：

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

我继续将您的 array-contents 文本也更改为计算值，以便正确显示。

【讨论】：