onclickの無いRJSなんて

By kato 2008年05月21日

加藤です。もはやインラインRJSだらけなので、onclickダメとかいわれても困ります。

ということでRJSネタなんですが、RJSでメソッドチェイン出来ることに今更気付きました。というか、対応するPrototypeやScript.aculo.usのメソッドがElementを返すことを知りませんでした。

例えば、onClickで要素クラスを入れ替えてYellow Fadeさせる場合は以下のように書けます。

<%= link_to_function '表示に戻る' do |page|
  page[:item].remove_class_name(:edit).add_class_name(:show).visual_effect(:highlight)
end %>

あとRJSとは直接関係ないですが、Effect.Highlightを使うと最終的な背景色がスタイル属性に書き込まれてしまい色々と副作用があります。一度エフェクトさせた後に背景色が変化しなくなるとか、エフェクトをかける度に背景色が濃くなっていくとったダサい状況は、これが原因であることが多いと思います。

問題を解決するには、style属性のbackgroundColorをnullにしてあげれば良いのですが、エフェクトのキューの最後に実行したい事が多いので、新しいEffectクラスを作成して対応することにしました。

Effect.ResetHighlight = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({ fps: 10, duration: .1 }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {},
  update: function() {
    this.element.setStyle({ backgroundColor: null });
  },
  finish: function() {}
});

先ほどのRJSで使うと以下のようになります。

<%= link_to_function '表示に戻る' do |page|
  page[:item].remove_class_name(:edit).add_class_name(:show).visual_effect(:highlight).visual_effect(:reset_highlight, { :queue => :end })
end %>

ちなみに、どちらもまだFirefox3でしか確認していないのでブラウザ互換性については不明です。

Bookmark and Share