jQuery UIとノックアウトフィルタリング結果でドラッグアンドドロップ

Question

まず第一に、ここに私が得ている問題があるJSFiddleがあります。

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

前提：

ご覧のとおり、ユーザー名でフィルタリングパラメーターを入力できる入力ボックスが1つあります。

また、このコードにより、すべてのユーザーがjQuery UIでドラッグアンドドロップをサポートします。

何かを検索してからアイテムをドラッグしようとした後、1つのアイテムだけがドラッグ可能であるのとは対照的に、すべてがドラッグされます。

私が達成しようとしていること：

ユーザーのリストをフィルタリングし、結果のすべてのユーザーを1つずつドラッグできるようにしたいと思います。

質問：

この問題を回避するために、これに違ったアプローチにどのようにアプローチしますか？実際、現時点でこの問題を引き起こしているものは何ですか？

私の仮説：

検索の後、ノックアウトはおそらく私のために新しいDOMオブジェクトのセットを生成します（前のセットがまだメモリにあります）。私はまだどこかにハンドラーがぶら下がっています。 ？新しいレンダリングが完了した後、ドラッグがまったく機能しないことをまだ期待しています。

乾杯、ラリ

Answer 1

セレクターは、各ユーザーだけでなく、各ユーザーのコンテナDIVにヒットしているようです。実際のユーザーテンプレートは初めてレンダリングされますが、 foreach 領域はフィルターに基づいて再レンダリングされます。

1つの選択肢はあなたを置くことです 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/