1

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

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

前提:

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

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

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

我想要达到的目标:

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

问题:

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

我的假设:

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

干杯,拉里

4

1 回答 1

3

看起来您的选择器正在为每个过滤的用户以及每个用户点击容器 div。实际的用户模板只在第一次渲染,而foreach区域根据过滤器重新渲染。

一种选择是把你afterRenderforeach喜欢:

<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 回答