Form.Element.Observerをクリアする

Prototype.jsを使うと、フォームの内容を監視してコールバックを実行させることが簡単に実装できます。 たとえばこんな感じ。

new Form.Element.Observer('input_hoge',1, function(){ window.title=$F('input_hoge');} );

これはid=input_hogeのテキストフィールドの値を1秒間隔で取得して、タイトルに反映させる、というもの。Form.Element.Observerの最後の引数は関数を渡すのですが、無名関数でももちろんOK。ちょこっとしたことならこっちの方が楽かも。

さて、ここで問題は実はこのObserverをクリアする方法が無い、ということ。Prototype.jsは他にもTimerをクリアできない問題があったような。。。(記憶あやふや)なんとなく気持ち悪いのでいろいろ調べていたら、綺麗に解決されてる事例があったのでメモ。

blog.nomadscafe.jpより引用。 Form.Element.Observerのprototypeをいろいろいじっています。以下のコードをPrototype.jsに追加。

Form.Element.Observer.prototype.registerCallback=function(){ this.interval = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000); }; Form.Element.Observer.prototype.clearTimerEvent=function(){ clearInterval(this.interval); }; Form.Element.Observer.prototype.onTimerEvent=function(){ try{ var node = this.element.parentNode.tagName; }catch(e){ this.clearTimerEvent(); } var value = this.getValue(); if (this.lastValue != value) { this.callback(this.element, value); this.lastValue = value; } };

つまり、監視対象のオブジェクトがなくなったらclearIntervalしてあげよう、というもの。 なので、「もうこのオブジェクトはいらない!」のタイミングでinnerHTMLを書き換えてしまえば監視対象から外れます。

元記事では、明示的にあるリンクのクリックをトリガにしてinnerHTMLを書き換えてたけども、監視はフォームの要素が対象になるので、「focusIn」→監視開始、「focusOut」→監視終了、というトリガでうまくまとまらないかな??、、、と、思いつつまだ未検証です。あと、clearIntervalのトリガにtry-catchを利用しているのも、ちょっと考えてみたいです。

 

関連広告

Trackbacks:0

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/36
Listed below are links to weblogs that reference
Form.Element.Observerをクリアする from blog.katsuma.tv

Home > Javascript > Form.Element.Observerをクリアする

Search
Feeds

Return to page top