8

SearchBox というクラスを作成して、検索操作 (トリガーの遅延、Enter キーを押したときの検索、アクティブな検索の防止、検索が完了してテキストが変更されたときの結果の同期など) を処理しました。

すべてのクラス メソッドはプロトタイプ メソッドであり、 経由でアクセスすることを意図していますthis。p次のコードでは、 がクラスのプロトタイプであると想定しています。

p.registerListeners = function () {
    $(this.element).on('keypress', this.searchKeyPressed);
};

p.unregisterListeners = function () {
    $(this.element).off('keypress', this.searchKeyPressed);
};

keypress イベントがsearchKeyPressedハンドラーを呼び出すとき、のコンテキストではそうしないため、これは機能しませんthis。私が思い付くことができる唯一の解決策は、最新のブラウザーのみがサポートするものでthisあり、実際に新しい関数を作成するコールバックを にバインドすることです。新しい関数を作成するため、後で削除するためにキャッシュする必要があります。これは、に渡したものと同じ参照を渡す必要があるoffためonです。

これよりも良い方法はありますか、それともこれで問題ありませんか?

var boundKeyPressed;

p.registerListeners = function () {
    boundKeyPressed = this.searchKeyPressed.bind(this);
    $(this.element).on('keypress', boundKeyPressed);
};

p.unregisterListeners = function () {
    $(this.element).off('keypress', boundKeyPressed);
};

jQuery.onこのイベントバインディングを自動的に行う方法を提供するのではないかと思っていましたが、this呼び出し方によって異なるものにバインドされているようです。たとえば、 を使用する場合on('eventname',instance.func)、thisは「currentTarget」(バブリング用語では必ずしも「ターゲット」とは限りません) ですが、 を使用する場合は、セレクターに一致する要素を参照しますon('eventname','selector',instance.func)。thisどちらの場合でも、 はfuncと関係がないかのように実行されますinstance。

4

5 に答える 5

3

を使用する代わりに、関数bindを使用してコンテキストを保持できます。これにより、アンバインドできるラッパー関数が作成されます。jQuery.proxy

jQuery.proxy複数のバリアントがありjQuery.proxy(function, context)ますが、今のところ、使用する必要があるのは次のとおりです。

p.registerListeners = function () {
    $(this.element).on('keypress', $.proxy(this.searchKeyPressed, this));
};

p.unregisterListeners = function () {
    $(this.element).off('keypress', $.proxy(this.searchKeyPressed, this));
};
于 2015-12-03T09:47:02.567 に答える