1

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

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

前提：

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

该代码还使所有用户都支持使用 JQuery UI 进行拖放。

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

我想要达到的目标：

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

问题：

我将如何以不同的方式解决这个问题以避免这个问题，事实上 - 目前是什么导致了这个问题？

我的假设：

搜索后，knockout 可能会为我生成一组新的 Dom 对象（而前一组仍在内存中），我仍然有一些处理程序挂在某个地方，经过一轮搜索后，旧处理程序开始与新处理程序混淆? 在新的渲染完成后，我仍然希望拖动而不是根本不起作用。

干杯，拉里

4

1 回答 1

3

看起来您的选择器正在为每个过滤的用户以及每个用户点击容器 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/

于 2012-02-20T00:41:04.217 回答