0

Rails アプリにエンドレス スクロールを追加しようとしています... ryan bates のチュートリアルに従いましたが、次のページのコンテンツを読み込むのにまだ問題があります。

したがって、使用している構造についての手がかりが得られます...主に静的ページと他のいくつかの非静的ページを含む静的ページと呼ばれるコントローラーがあります...それらのページの1つは「フィード」と呼ばれるため、 static_pages ビュー内にあるfeed.html.erb

ユーザーの更新情報を表示するフィード ページです。

これがコントローラーです（static_pages）

def feed
  if signed_in?
    @update = current_user.updates.build
    @feed_items = current_user.feed.page(params[:page]).per_page(5)
  else
    flash[:error] = "Please sign in."
    redirect_to login_url
  end

  respond_to do |format|
    format.js
    format.html
  end
end

ここにフィードのHTMLビューがあります

<div class="row">
  <div class="span8 offset2 settings update">
    <div id="feeds">
  <%= render partial: "shared/feed_item", collection: @feed_items %>
</div>
    <%= will_paginate @feed_items %>
  </div> 
</div>

これが私のstatic_pages.js.coffeeです（ライアン・ベイツから）

jQuery ->
  if $('.pagination').length
  $(window).scroll ->
    url = $('.pagination .next_page a').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').text("Fetching more products...")
      $.getScript(url)
  $(window).scroll()

最後に、feed.js.erb (static_pages ビュー フォルダー内) を示します。

$('#feeds').append("<%= render partial: 'shared/feed_item', collection: @feed_items %>");
  <% if @feed_items.current_page < @feed_items.num_pages %>
  $('.pagination').replaceWith('<%= will_paginate(@feed_items) %>');
<% else %>
  $('.pagination').remove();
<% end %>

誰か刺して、ここで何が起こっているのかを理解しようとしますか? 私はそれが見えないのは簡単なことだと確信しています。（ちなみに、エンドレススクロールに取り掛かる前は、ページネーションはうまく機能していました）

フィードページにアクセスして一番下までスクロールしようとすると、テキスト (Fetching more products) はレンダリングされますが、新しい feed_items はレンダリングされません。

trueunlessfalse の編集

static_pages コーヒースクリプト

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page a').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 5
        $('.pagination').text("Hello world!")
        $.getScript(url)
    $(window).scroll()

feed.html.erb

<div class="row">
  <div class="span8 offset2 settings update">
    <div id="feeds" data-no-turbolink>
  <%= render partial: "shared/feed_item", collection: @feed_items %>
    </div>
    <%= will_paginate @feed_items %>
  </div>
</div>

feed.js.erb

$('#feeds').append("<%= j render partial: 'shared/feed_item', collection: @feed_items %>");
  <% if @feed_items.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@feed_items) %>');
  <% else %>
    $('.pagination').remove();
  <% end %>
4

0 に答える 0