2

ここにjquery（UI）アプリがあり、JQueryコード全体が少し乱雑になっているので、これを少し凝った方法で構造化する方法を考え始めました...どこかでブログ投稿を読んで、「おっと"-Javaの方法では、次のようなことを行うことで実現できます。

function RangeSelector(product_id) {
    this.product_id = product_id;
    this.start_point = "#from_" + product_id;
    this.end_point = "#to_" + product_id;
}
RangeSelector.prototype.myFunction = function() { }

コード全体はここにあります。

My Range Selector "Class"は、2つのjquery ui datetimepickersを保持する必要があります。これらは、ユーザーが商品をレンタルできるショップの日時範囲を選択できるようにする役割を果たします。

私が現在抱えている問題は次のとおりです。日時ピッカーがコールバック関数（ "unavailableFrom"、 "unavailableTo"）を取得し、特定のことを実行してから、汎用の"unavailable"を呼び出して関数にします。エラーメッセージは次のとおりです。

TypeError: 'undefined' is not a function (evaluating 'this.unavailable(date)')

私はfirebugでそれについて調べましたが、「これ」はRangeSelectorの私のオブジェクトではなく、datetimepickerが機能しているHTML要素のようです。私の質問は、このメソッドに「使用不可」でアクセスするにはどうすればよいですか？

ちなみに、ここで全体の話をします。私がここで選んだ構造が正しい道だとは思わないので。共通の意味を持つ複数のhtml要素があり、それらを集約したい場合、これらの種類のものをどのように処理しますか？

4

2 に答える 2

5

this別の値に設定する必要がある場合は、それを使用jQuery.proxyして設定できます。（または、ES5対応環境では、新しいFunction#bind関数を使用できます。）proxyに使用する関数と値を受け入れ、その値thisに設定された元の関数を呼び出す関数を返しthisます。

したがって、たとえば、あなたが持っていて、特定のインスタンスでトリガーしRangeSelectorたいとします。clickmyFunction

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click($.proxy(r.myFunction, r));

これで、r.myFunctionが呼び出されると、呼び出し内でオブジェクトthisへの参照になりrます。（クリックされたDOM要素を知る必要がある場合は、jQueryが渡す引数をmyFunction受け入れて、を使用してください。）eventevent.target

完全を期すために、上記を使用しFunction#bindます（ブラウザーがES5機能をサポートしている場合、またはES5シムを含めている場合[Function#bindシム可能であるため]）：

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click(r.myFunction.bind(r));

もっと探検する（私のブログで）：

jQuery UIはオブジェクトを提供しないため、にアクセスできないため、少しdatepicker面倒です。あなたの最善の策は、おそらく要素を渡すクロージャがあるでしょう：onSelecteventevent.target

var r = new RangeSelector(/* ...args...*/);
$("some_selector")..datepicker({
    onSelect: function(dateText, inst) {
        return r.myFunction(dateText, inst, this);
    }
});

...ここで、、、および引数myFunctionを受け入れます。dateTextinstelement

実例| ソース

これは、割り当てている関数が変数onSelectを含む環境のクロージャーであるために機能します。r

閉鎖はしばしば誤解されます。FWIW、別のブログエントリ：閉鎖は複雑ではありません

于 2012-04-04T11:14:16.447 に答える
0

キーワードthisはあなたの範囲を変えているので、あなたが期待するように異なる場所で同じことを意味するわけではありません。でスコープを識別しようとするのではなく、関数で操作している要素を明示的に渡し、その要素を直接参照することをお勧めしますthis。

于 2012-04-04T11:21:33.930 に答える