1

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

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

前提：

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

このコードは、すべてのユーザーが JQuery UI でドラッグ アンド ドロップをサポートするようにもします。

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

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

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

質問：

この問題を回避するために、これとは異なる方法でアプローチするにはどうすればよいでしょうか。実際、現時点でこの問題の原因は何ですか?

私の仮説:

検索後、ノックアウトはおそらく Dom オブジェクトの新しいセットを生成します (前のセットがまだメモリ内にある間)、まだいくつかのハンドラーがどこかにぶら下がっていて、1 回の検索の後、古いハンドラーが新しいハンドラーをいじり始めます。 ? 新しいレンダリングが完了した後、ドラッグがまったく機能しないことを期待しています。

乾杯、ラリ

4

1 に答える 1

3

セレクターが、フィルター処理された各ユーザーと各ユーザーのコンテナー 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/

于 2012-02-20T00:41:04.217 に答える