Drag & Drop mit JQuery UI und Knockout -gefilterten Ergebnissen

Question

Zunächst einmal ist hier eine JSFiddle, die das Problem hat, das ich bekomme.

http://jsfiddle.net/ug66k/9/

Prämisse:

Wie Sie sehen können, habe ich ein Eingabefeld, in dem Sie Filterparameter auf Benutzernamen eingeben können.

Mit dem Code unterstützen alle Benutzer auch Drag & Drop mit der JQuery -Benutzeroberfläche.

Nach einer Runde der Suche nach etwas und dann wird versucht, die Gegenstände zu ziehen - alles wird gezogen, im Gegensatz zu nur einem Gegenstand, der draggierbar ist.

Was ich versuche zu erreichen:

Ich möchte eine Liste von Benutzern filtern und alle resultierenden Benutzer nacheinander draggierbar sind.

Frage:

Wie würde ich mich so anders angehen, um dieses Problem zu vermeiden, und in der Tat - was verursacht dieses Problem im Moment?

Meine Hypothese:

Nach einer Suche generiert Knockout wahrscheinlich einen neuen Satz von DOM -Objekten für mich (während der vorherige Satz immer noch im Speicher ist), und ich habe immer noch einige Handler, die irgendwo hängen, und nach einer Runde der Suche nach den alten Handlern fangen ich an, mit den neuen zu spielen ? Ich würde immer noch erwarten, dass das Ziehen eher nach Abschluss des neuen Renders funktioniert.

Prost, Lari

Answer 1

Es sieht so aus, als würde Ihr Selektor für jeden gefilterten Benutzer sowie jeden Benutzer auf das Container -Div schlagen. Die tatsächliche Benutzervorlage wird erst zum ersten Mal umgeführt, während die foreach Der Bereich wird basierend auf dem Filter neu geführt.

Eine Wahl wäre, Ihre zu setzen afterRender auf der foreach wie:

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

Probe: http://jsfiddle.net/rniemeyer/ug66k/13/

Andernfalls können Sie sicherlich eine einfache benutzerdefinierte Bindung verwenden, um dies zu erreichen:

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

Dann benutze es wie:

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

Hier ist ein Beispiel: http://jsfiddle.net/rniemeyer/ug66k/12/