javascript – KnockoutJS / jQuery UI可排序冲突

我正在尝试将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天才的公开调用 – 有没有办法解决这个冲突,或者我是否需要做一些完全不同的事情才能让这些工具很好地协同工作？

解决方法:

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

我继续将你的数组内容文本更改为计算,因此它将正确显示.

标签：javascript,dom,jquery-ui,knockout-js,jquery-ui-sortable
来源： https://codeday.me/bug/20190630/1332036.html