KnockoutJS/jQuery UI Sortable Conflict

Question

J'essaie d'utiliser KnockoutJS et jQuery UI Sortable ensemble. Je sais que cela a été fait auparavant (en particulier, knockout-sortable), mais mon cas d'utilisation a un comportement assez spécifique et j'espère éviter d'essayer de faire le changement. De toute façon, le problème est assez simple - après avoir déplacé un élément DOM avec jQuery UI Sortable, Knockout se comporte étrangement lors de la suppression de l'élément observableArray lié à cet élément DOM. Il ne parviendra pas à supprimer l'élément déplacé, et si l'élément qui est tombé à la place de l'élément déplacé est supprimé, il supprimera à la fois cet élément et l'élément initialement déplacé. Difficile à mettre en mots, mais démontré par this fiddle.

Le problème semble effectivement prendre place dans le bloc suivant à élimination directe-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)); 
    } 
} 

Cet appel est d'ajouter à la liste des éléments à supprimer l'élément DOM déplacé lorsque l'élément déplacé est retiré.

Donc, un appel ouvert aux génies de jQuery UI/Knockoutjs - y a-t-il un moyen de résoudre ce conflit, ou dois-je faire quelque chose de complètement différent pour que ces outils jouent bien ensemble?

Answer 1

Je pense que la "meilleure" solution est de supprimer l'élément de DOM et de changer sa position dans KO. Vous pouvez le faire dans l'événement stop du triable. http://jsfiddle.net/vgrTY/4/

Je suis allé de l'avant et a changé votre texte array-contents à un calculé ainsi, il s'affichera correctement.