Question

首先，这是一个JSFiddle，它有我遇到的问题。

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

前提：

如您所见，我有一个输入框，您可以在其中键入用户名的过滤参数。

该代码还使所有用户都支持drag＆amp;使用JQuery UI删除。

经过一轮搜索，然后尝试拖动项目 - 一切都被拖动，而不是只有一个项目可以拖动。

我想要实现的目标：

我想过滤一个用户列表，让所有生成的用户一个接一个地拖动。

问题：

我如何以不同方式解决此问题，以及实际上 - 目前导致此问题的原因是什么？

我的假设：

搜索之后，淘汰赛可能会为我生成一组新的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/

使用JQuery UI和Knockout过滤结果进行拖放

1 个答案: