JQuery UIとKnockoutでフィルタリングした結果をドラッグアンドドロップする

Question

まずは、私が得ている問題を抱えているJSFiddleがあります。

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

前提：

あなたは、あなたがユーザ名のフィルタリングパラメータを入力することが可能な一つの入力ボックスを見ることができるように私は、持っています。

また、このコードでは、すべてのユーザーがJllery UIでドラッグ&のドラッグをサポートするようにしています。

何かを検索してアイテムをドラッグしようとすると、ドラッグ可能なアイテムが1つだけではなく、すべてがドラッグされます。

私は何を達成しようとしている：私は、ユーザーのリストをフィルタリングすると、すべての結果のユーザーが一つドラッグいずれかである必要があり

。

質問：

がどのように私はこの問題を回避するために、異なるこのアプローチを考え、実際には - 何が現時点ではこの問題を引き起こしていますか？

私の仮説：検索後

は、ノックアウトはおそらく（前のセットがメモリ内にある間）ドムの新しいセットが私のためにオブジェクトを生成して、私はまだどこかに掛かっていくつかのハンドラを持っている、と後古いハンドラを検索する1ラウンドは新しいものを使いこなすでしょうか？私はまだ新しいレンダリングが完了した後で、むしろドラッグしても全くうまくいかないと思っています。

乾杯、 ラリ

Answer 1

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

<div data-bind="foreach: { data: filteredItems, afterRender: $root.makeDraggable }"> 
    <div data-bind="text: Username" /> 
</div> 

サンプル：

一つの選択肢はforeach等にごafterRenderを置くことであろうそうでなければ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/