Arrastre y suelte con la interfaz de usuario de jQuery y los resultados filtrados de knockout

Question

En primer lugar, aquí hay un jsfiddle que tiene el problema que tengo.

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

Premisa:

Tengo, como puede ver, un cuadro de entrada en el que puede escribir parámetros de filtrado en los nombres de usuario.

El código también hace que todos los usuarios admitan arrastrar y soltar con jQuery UI.

Después de una ronda de buscar algo y luego tratar de arrastrar los elementos, todo se arrastra en lugar de que un solo elemento sea arrastrable.

Lo que estoy tratando de lograr:

Quiero filtrar una lista de usuarios y hacer que todos los usuarios resultantes sean arrastrables uno por uno.

Pregunta:

¿Cómo abordaría esto de manera diferente para evitar este problema y, de hecho, qué está causando este problema en este momento?

Mi hipótesis:

Después de una búsqueda, Knockout probablemente genera un nuevo conjunto de objetos DOM para mí (mientras que el conjunto anterior todavía está en la memoria), y todavía tengo algunos manejadores colgando en algún lugar, y después de una ronda de buscar a los viejos manejadores comienzan a meterse con los nuevos. ? Todavía esperaba que el arrastre no funcione en absoluto después de que se haya completado el nuevo render.

Saludos, Lari

Answer 1

Parece que su selector está presionando el contenedor DIV para cada usuario filtrado, así como cada usuario. La plantilla de usuario real solo se presenta la primera vez, mientras que la foreach El área se vuelve a renderizar en función del filtro.

Una opción sería poner tu afterRender sobre el foreach me gusta:

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

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

De lo contrario, ciertamente puede usar un enlace personalizado simple para que esto suceda como:

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

Entonces, úsalo como:

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

Aquí hay una muestra: http://jsfiddle.net/rniemeyer/ug66k/12/