24

ドラッグ アンド ドロップと ajax アップロードに plupload を使用するノックアウト バインディング ハンドラーがあります。

plupload スクリプトを使用するには、plupload のインスタンスを作成します。このインスタンスは、イベント リスナーを DOM 要素にバインドします。

それはうまくいきます。

ただし、「フォルダー」のリストがあり、フォルダーをクリックすると、そのフォルダー内のファイルのリストが表示されます。foreach を使用して selectedFolder().documents をバインドすることで、同じ DOM 要素を再利用します。

私が抱えている問題は、バインド ハンドラーで init 関数ですべての plupload を実行し、DOM 要素を再利用するため、それらにバインドされた複数のイベント ハンドラーを取得することです。これにより、ドラッグ アンド ドロップ イベントが alla ハンドラに送信されます。これは、レンダリングされたファイル リストにファイルをドロップすると、以前にレンダリングされたすべてのファイル リストでもドロップ イベントが発生することを意味します。

私が探しているのは、バインディング ハンドラー内のある種のティアダウンまたはクリーンアップ関数です。これにより、ファイル リストがレンダリングされないときはいつでもすべてのイベントを登録解除できます (それは単語ですか?)。

アンレンダリングを検出できないのではないでしょうか? 次に、これをどのように処理しますか？同時に複数の場所でバインディングを使用できなくなるため、グローバル インスタンスを使用しないことをお勧めします。

コードを提供できなくて申し訳ありません。私は自分の携帯電話の ATM にいます。

乾杯！

4

2 に答える 2

32

KO が要素を削除するたびに実行されるハンドラーを登録できます (テンプレートが再レンダリングされるときなど)。次のようになります。

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).datepicker("destroy");
    });

したがって、「init」関数で、バインドされている要素の破棄コールバックを登録すると、必要なクリーンアップ コードを実行する機会が得られます。

于 2012-04-25T22:21:00.323 に答える
3

ここで提供されるソリューションは、Knockout が DOM ノードを削除する場合 (つまり、テンプレートを再調整する場合) にのみ機能すると思います。特定の条件下で発動させるのに苦労しました。要素がどのように削除されたかに関係なく、コールバックを実行する必要があるシナリオがあるかもしれません。Knockout を使用するか、jQuery.html() を使用するかなど (特に単一ページ アプリケーションの場合)。

jQuery の助けを借りて、このようなフックを追加するための別のアプローチを作成しました。特別なイベント API (ここで詳しく説明されています) を使用すると、特定のイベントが DOM ノードから削除されたときに実行されるメソッドを追加できます (ティアダウンで発生するもの)。

Knockout を jQuery と組み合わせて使用​​している場合は、これをノックアウト バインディングにラップして、次のようにすることができます。

ko.bindingHandlers.unload = {
    init: function (element, valueAccessor) {
        var eventName = 'your_unique_unLoad_event'; // Make sure this name does not collide
        if (!$.event.special[eventName]) {
            $.event.special[eventName] = {
                remove: function (o) {
                    o.data.onUnload()
                }
            };
        }
        $(element).on(eventName, { onUnload: valueAccessor()}, $.noop);
    }
};

次に、次のような任意の要素でこれを使用できます。

<div id="withViewModelMethod" data-bind="unload: aMethodOnMyViewModel" />
<div id="withInLineMethod" data-bind="unload: function() { /* ... */ }" />

私はこのSO postにクレジットを負っています。

于 2013-01-23T20:00:17.523 に答える