Glisser-déposer avec JQuery UI et Knockout résultats filtrés

Question

Tout d'abord, voici un jsFiddle qui a le problème que je reçois.

http://jsfiddle.net/UG66K/9/

Prémisse:

Je l'ai, comme vous pouvez le voir, une zone de saisie dans laquelle vous pouvez saisir les paramètres de filtrage sur les noms d'utilisateur.

Le code fait également tous les utilisateurs drag & drop avec JQuery UI.

Après un tour de votre recherche, puis essayer de faire glisser les éléments -. Tout est traîné par opposition à un seul élément étant draggable

Ce que je suis en train de réaliser:

Je veux filtrer une liste d'utilisateurs, et que tous les utilisateurs résultant soient un draggable par un.

Question:

Comment cela différemment pour éviter ce problème que je l'approche, et en fait - ce qui est à l'origine de ce problème au moment

Mon hypothèse:

Après une recherche, KO génère probablement une nouvelle série de Dom objets pour moi (alors que le précédent est encore en mémoire), et j'ai encore des gestionnaires suspendus quelque part, et après un tour de recherche les anciens gestionnaires commencent à jouer avec les nouvelles? J'attends toujours le glisser plutôt de ne pas travailler du tout après le nouveau rendu est terminée.

Cordialement, Lari

Answer 1

Il semble que votre sélecteur frappe le conteneur div pour chaque utilisateur filtré, ainsi que chaque utilisateur. Le modèle de l'utilisateur réel ne reçoit que rendu la première fois, tandis que la zone foreach se base sur le filtre réaffichée.

Un choix serait de mettre votre afterRender sur le foreach comme:

<div data-bind="foreach: { data: filteredItems, afterRender: $root.makeDraggable }">
    <div data-bind="text: Username" />
</div>

Exemple: http://jsfiddle.net/rniemeyer/UG66K/13/

Dans le cas contraire, vous pouvez certainement utiliser une connexion simple sur mesure pour que cela se produise comme:

ko.bindingHandlers.draggable = {
    init: function(element, valueAccessor) {
       var options = ko.utils.unwrapObservable(valueAccessor()) || {};
       $(element).draggable(options);
    }    
};

Ensuite, l'utiliser comme:

<div data-bind="foreach: filteredItems">
    <div data-bind="text: Username, draggable: { appendTo: 'body', helper: 'clone' }" />
</div>

Voici un exemple: http://jsfiddle.net/rniemeyer/UG66K/12/