Перетащите и выпадайте с помощью интерфейса jQuery и нокаутированных результатов

Question

Прежде всего, вот JSFIDDLE, у которого есть проблема, которую я получаю.

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

Предпосылка:

У меня есть, как вы можете видеть, одно поле ввода, в которой вы можете ввести параметры фильтрации на именах пользователей.

Код также заставляет всех пользователей поддержать Drag & Drop с помощью пользовательского интерфейса jQuery.

После одного раунда поиска чего -либо, а затем пытаться перетаскивать предметы - все перетаскивается, а не один элемент, который будет перетаскивать.

Чего я пытаюсь достичь:

Я хочу отфильтровать список пользователей, и все полученные пользователи будут перетаскиваться один за другим.

Вопрос:

Как бы я подходил к этому по -другому, чтобы избежать этой проблемы, и на самом деле - что вызывает эту проблему на данный момент?

Моя гипотеза:

После поиска нокаут, вероятно, генерирует для меня новый набор объектов DOM (в то время как предыдущий набор все еще находится в памяти), и у меня все еще есть несколько обработчиков где -то висят, и после одного раунда поиска старых обработчиков начнет связываться с новыми. ? Я все еще ожидал, что перетаскивание, скорее, не будет работать вообще после завершения нового рендеринга.

Ура, Лари

Answer 1

Похоже, что ваш селектор попадает в контейнерный Div для каждого фильтрованного пользователя, а также для каждого пользователя. Фактический шаблон пользователя отображается только в первый раз, в то время как foreach Площадь переосмысливается на основе фильтра.

Одним из выборов было бы положить свой afterRender на foreach как:

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

Образец: http://jsfiddle.net/rniemeyer/ug66k/13/

В противном случае, вы, безусловно, можете использовать простой пользовательскую привязку, чтобы это произошло так, как:

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

Затем используйте его как:

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

Вот образец: http://jsfiddle.net/rniemeyer/ug66k/12/