2

ご存じのとおり、Rails 2 から 3 にアップグレードするときは、次のように置き換えます。

link_to_remote "more", :url => {...}

これとともに：

link_to "more", {...}, :remote => true

しかし、link_to_remote の :update オプションをどのように扱うのでしょうか? Railscast #205では、 Ryan Batesが JavaScript コードを含むサーバー レスポンスを使用してページ内の特定の要素を更新する方法を示していますが、この方法は私には間違っているように思えますlink_to。:remoteサーバーの応答を、簡単にテストでき、さまざまなページ (クライアント) でさまざまな方法で使用できる単純な HTML フラグメントにしたいと考えています。アクションをページ（ミニクライアント）に結び付けて一般的でなくなるため、サーバーが要求ページのターゲット要素のIDを知る必要はないと思います（純粋なHTMLよりも醜く感じます）応答）。

したがって、明確にするために、次のようなことを行う方法はありますか:

link_to_remote "more", :url => {...}, :update => "products-list"

Rails 3 と UJS で？それとも、サーバーの HTML 応答を取得してページの適切な要素に挿入するために JavaScript を作成する必要がありますか?

後者の場合、最善のアプローチを説明してください (link_toの:remoteオプションを使用できますか?)。

4

3 に答える 3

2

これが Rails で推奨されている方法であると 100% 確信しているわけではありませんが、うまく機能し、かなりクリーンな解決策を見つけました。データベースで最も人気のある 10 の製品を一覧表示するページがあるとします。最後に、AJAX 経由で残りのすべての製品をロードするためのリンクがあります。

<ul id="products-list">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
<%= link_to "more...", "/products/all", :id => "load-more", :remote => true %>

サーバーはプレーンな HTML を返します (リンクを多くの異なるページで使用でき、特定の DOM ID にバインドされないようにするため)。ajax:xRails UJS ドライバー (ここでは jQuery を使用) によってトリガーされるイベントを使用して、サーバーの応答を取得し、それをページの適切な要素に挿入します。

<%= javascript_tag do %>
  $("#load-more").bind("ajax:complete", function(et, e){
    $("#products-list").html(e.responseText);
  });
<% end %>

必要に応じて、イベントを使用しajax:loadingて「スピナー」を表示することもできます。

<%= javascript_tag do %>
  $("load-more").bind("ajax:loading", function(et, e){
    $(this).hide();
    $("#products-spinner").show();
  });
<% end %>

Rails UJS ドライバーは、他にもajax:success、ajax:failure、ajax:before、 の 4 つのイベントをトリガーしajax:afterます。詳細については、アプリに含まれているドライバー (public/javascripts/rails.js) を参照してください。

于 2010-07-19T20:41:10.307 に答える
1

js ビューでは/apps/views/product/index.js.erb、次のような JS コードを記述できます。

プロトタイプ：

$("products-list").update("<%= escape_javascript(render(@products))%>");

jquery:

$("products-list").html("<%= escape_javascript(render(@products))%>");

また

$("products-list").append("<%= escape_javascript(render(@products))%>");

リクエストが成功したときに実行されます

于 2010-06-29T18:45:47.653 に答える
0

はい、 link_to :remoteを使用して、後者のアプローチ (サーバーの応答を取得するカスタム JS を作成する) を適用できます。

また、json 応答を取得してから、JS を使用してページのデータを更新することもできます。いずれにせよ、ページ全体ではなく、部分的なものだけをレンダリングすることを忘れないでください。

編集：

サンプル コードです。ID「more」の項目をクリックすると AJAX 呼び出しが行われ、ページ内の #product-list 要素が更新されます。

 $("#more").click(function() {
 // make a POST call and replace the content
    $.post(, function(data) {
      $("#products-list").html(data);
    });
  });

これ以上のコードは必要ありません。ビューにコードを記述する代わりに、この JS を生成するためのヘルパーを記述できます。ところでこれはまだUJSです

于 2010-07-02T13:04:46.030 に答える