1

Simone Carletti のブログ投稿によると、Rails 3 の ajax ヘルパーは大幅に変更されています。Rails 3 では、Rails 2 で使用していたよりも多くの JavaScript を記述する必要があります。

「Rails 3 way」で、ajax クエリの実行中に ajax 読み込み gif を表示する方法を見つけようとしました。Rails 3 UJS ドライバーから送信された JavaScript イベントを使用するこの種のコードを思いつきました。この例ではプロトタイプを使用しています。

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<div>
    <%= link_to 'Get', 'finished', :id => "mylink", :remote => true %>
</div>

<%= javascript_tag do %>
        Event.observe('mylink', 'ajax:before', function(event) {
            $('wait').show();
        });
        Event.observe('mylink', 'ajax:complete', function(event) {
            $('wait').hide();
        });
<% end %>

これはうまく機能しますが、たとえば link_to_function を使用するときのように、プロトタイプと scriptaculous ヘルパーの助けを借りて、これらの ajax イベントの「トリガー」を記述できればと思います。

<%= 
  link_to_function("toggle visibility") do |page|
    page.toggle "wait"
  end
%>

それを行う方法はありますか、それともプロトタイプまたはjqueryのいずれかで、javascriptでajaxイベントの「トリガー」を直接記述することになっていますか?

よろしくお願いします、

フィリップ・ラング

4

2 に答える 2

5

UJS の考え方は、javascript コードをビューから別の js ファイルに移動することです。あなたがやっている方法は、その目標を打ち負かすことです。代わりに、「dom:loaded」またはレール コールバックやその他のイベントのハンドラーを設定する同様のハンドラーを含む js ファイルが必要だと思います。

次のようなもの（プロトタイプを使用）：

(function () {

  $(document).on('dom:loaded', function (event) {

    $$('a[data-remote=true]').each(function (link) {
      link.on('ajax:complete', function (request) {
        // do something
      });
    });

  });

}());

このようにして、すべての JavaScript がビューから分離されます。これは控えめな JavaScript の考え方です。

于 2010-12-13T11:24:26.520 に答える
0

Rails のソース コードを調べた後、次の解決策を思いつきました。

  def javascript_event_tag(name, event, &block)
    content = "Event.observe('#{name}', '#{event}', function() {"
    content = content + update_page(&block)
    content = content + "});"

    content_tag(:script, javascript_cdata_section(content))
  end

これにより、UJS イベントへの対応が容易になります。

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<%= link_to 'ajax call', 'code_on_controller', :id => "mylink", :remote => true %>

<%= 
   javascript_event_tag('mylink', 'ajax:before') do |page|
     page.show 'wait'
   end
 %>
 <%= 
   javascript_event_tag('mylink', 'ajax:complete') do |page|
     page.hide 'wait'
   end
 %>

生のプロトタイプや jquery コードを記述する代わりに、Rails ヘルパーを使用できます。

于 2010-10-15T07:09:58.477 に答える