Перетащите с помощью JQuery UI и Knockout отфильтрованных результатов - PullRequest
Новая
       5

Перетащите с помощью JQuery UI и Knockout отфильтрованных результатов

1 голос
/ 20 февраля 2012

Прежде всего, вот JSFiddle, у которого возникла проблема.

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

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

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

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

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

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

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

Вопрос:

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

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

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

Cheers, Lari

1 Ответ

3 голосов
/ 20 февраля 2012

Похоже, ваш селектор работает с контейнером 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/

...