11

注：ここでは、私が行っていることのロジックを示しています。

私がしていること：

商品を一覧表示し、ページ付けを行う基本的なインデックスアクションについて考えてみてください。ここでremote-trueオプションを使用して、ajaxベースのページネーションを有効にしました。これまでのところ、物事は完全にうまく機能しています。サンプルコードを見てください。

製品コントローラー：

 def index
  @products = Product.paginate(:order =>"name ASC" ,:page => params[:page], :per_page => 14)
   respond_to do |format|
     format.html # index.html.erb
     format.json { render json: @products }
     format.js
   end
 end

Index.html.erb

<h1>Products</h1>
<div id="products">
    <%= render "products/products" %> // products partial is just basic html rendering
</div>

<script>
$(function(){
   $('.pagination a').attr('data-remote', 'true')
});
</script>

Index.js.erb

  jQuery('#products').html("<%= escape_javascript (render :partial => 'products/products' ) %>");
  $('.pagination a').attr('data-remote', 'true');

だから問題は何ですか：

ここで、これに対してアクションキャッシングを有効にします。しかし、index.js.erbファイルはDOMを操作していません。remote-true機能を削除すると、キャッシュで問題なく動作します。

アクションキャッシングのために、コントローラーの上部に次の行を追加しました。

 caches_action :index, :cache_path => Proc.new { |c| c.params }

助言がありますか？

アップデート：

問題は、jqueryコードが実行されていないことです。この質問から

何が悪いのかわかりました。jQueryは実際に着信スクリプトをで囲み、ブラウザが着信コードを評価するようにします。ただし、キャッシングメカニズムはコードをテキストとして保存するだけであり、1回再リクエストすると、コードはテキストとして返されますが、評価はされません。したがって、コードを明示的に評価する必要があります

しかし、この問題を解決するにはどうすればよいですか？

4

4 に答える 4

4

試行錯誤の末、回避策があると思います。

ページリンク

それ以外の

$(function() { $('.pagination a').attr('data-remote', 'true') });

使用する

$(function() {
  $('.pagination a').click(function() {
    $.ajax({
      url: this.href,
      dataType: 'script'
    });
    return false;
  });
});

アプリサーバーによって作成された応答はjavascriptとして実行されます

コントローラ

caches_action次に、行を次のように変更します

caches_action :index, cache_path: proc { |c| c.params.except(:_).merge(format: request.format) }

ajaxは_ある種のタイムスタンプのパラメータを追加するため

うまくいけば、これはうまくいきます:)

于 2013-02-07T09:32:15.077 に答える
3

を使用する際の問題が何であるかわかりませんremote: true。他の誰かがの.ajax代わりに使用することを提案しましremote: trueたが、それはまさにリモート機能が行うことなので、違いはないはずです。

もう 1 つの回答には、明示的に を使用するコードがありますjQuery.ajaxが、リモート機能と比較した場合のコードの唯一の違いは、明示的に を指定していることですdataType。ただし、実際にはそれを行うことができremote: trueます。

HTML リンクでは、 を指定するだけですdata-type="script"。または、投稿した JS に基づいて、次のようにします。

$(function(){
   $('.pagination a').attr('data-remote', 'true').attr('data-type', 'script');
});

編集: また、data-type 属性と Rails での動作方法について詳しく書いています: http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data- type-with-jquery/

于 2013-02-08T17:52:13.387 に答える
0

私は同じ問題を抱えていましたが、:remote => true を使用した 3.0.3 アプリケーションで :'data-type' =>: スクリプトを追加し、正常に動作しました。

ただし、私の場合、リストを ajax でロードしても改善が見られません。

于 2013-08-01T07:49:22.243 に答える