Will_paginate，渲染下一页

Question

我正在使用 will_paginate gem 为我的 post 分页。我想做无限滚动。我看的视频很少，读了几个 post，但这并不是我真正需要的（因为我的应用程序结构）。你看，home.html.erb（简称），看起来像：

<div class='news-lent'>
  <%= render 'posts/posts_for_all', posts_variable: @posts %>
</div>

还有我的_posts_for_all.html.erb（简称），长得像（简称）：

<% posts_variable.each do |post| %>
  <%= link_to post.theme, post %>
<% end %>
<% will_paginate posts_variable, :next_label => "More" %> # => i need it every
time the page is loaded

我已经为所有人写了JS，除了一行：

$('.news-lent').append('<%= j render *some_thing* %>')

嗯，我不知道渲染什么通道。我无法通过 @posts（它将 return 错误（缺少部分 posts/_post）），并且 @posts.next_page（它将 return 2）和#{posts_path(@post)}?page=#{@post.current_page+1} （但这也行不通）和其他问题。

你能帮帮我吗，我需要在 j render 里面放点东西，这样才能渲染下一页？

更新

我用 RailCast 视频重新制作了所有内容，就像@Szilard Magyar 告诉我做的一样，但现在它一直渲染相同的（第一页）并且它根本不渲染第二页，什么可以创建这样的有问题吗？

更新

关注railcast视频（修改了我的应用程序结构），出现了一个新问题：

我的home.js.coffee:

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

我的index.js.erb:

$('.one').append('<%= j render @posts, posts_variable: @posts %>');
  <% if @posts.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
  <% else %>
    $('.pagination').remove();
  <% end %>
<% sleep 3 %>

我的index.html.erb:

<div class="news-lent">
  <div class="one">
    <%= render @posts, posts_variable: @posts %>
  </div>

  <div id="infinite-product-scrolling">
    <%= will_paginate @posts, :next_label => " Еще" %>
  </div>
</div>

但是现在，当我在第一页并向下滚动时它会呈现第二页，但是是 2 倍，当我再次滚动到底部时它会呈现第二页（它不会呈现第三页）。我不知道怎么解决，你能再给我登陆吗？

Answer 1

index.html.erb

<div class="product-index-list new-product-insert">
  <%= render @products %>
</div>
<div id="infinite-product-scrolling">
  <%= will_paginate @products %>
</div>
<div class="no-more">
  <p>No more products.</p>
</div>

_product.html.erb

<div class="name"><%= product.name %></div>
<div class="oneliner"><%= product.oneliner %></div>

products.js

if ($('#infinite-product-scrolling').size() > 0) {
  $(window).on('scroll', function() {
    $('#infinite-product-scrolling').hide();
    var more_products_url;
    more_products_url = $('#infinite-product-scrolling .pagination .next_page a').attr('href');
    if (more_products_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
      $('.pagination').html("<i class='fa fa-circle-o-notch fa-2x fa-spin'></i>");
      $('#infinite-product-scrolling').show();
      $.getScript(more_products_url);
    }
  });
};

index.js.erb

$('.new-product-insert').append('<%= j render @products %>');
<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @products %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
  $('.no-more').delay(1000).fadeIn(1500);
<% end %>

Answer 2

解决，问题出现是因为我的错误。在这里：

jQuery ->
  url = $('.pagination .next_page a').attr('href')
  $(window).scroll ->

url 变量只分配了一次，在滚动之前，那是我的错误。所以如果 url 被保存，那么它总是呈现第二页而不是第三页。我们必须将 url 下移到 .scroll 事件下，它会始终检查已呈现的页面。像这样：

jQuery ->
  $(window).scroll ->
  url = $('.pagination .next_page a').attr('href')

顺便说一句，我会建议所有人（如果他们使用 RailsCast tutorial 中的 jQuery）添加一些脚本以防止用户滚动时加载多个页面

jQuery ->
  $(window).scroll ->
    url = $('.pagination .next_page a').attr('href')
    return if(window.pagination_loading) # -> add this
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      window.pagination_loading = true # -> and this 
      $('.pagination').text('Fetching products...')
      $.getScript(url).always ->
        window.pagination_loading = false # -> and this

并且为了防止 url 变量出现错误等，您需要添加 a，所以它看起来像 url = $('.pagination .next_page a').attr('href') 而不是 RailsCast 教程: url = $('.pagination .next_page').attr('href')

Will_paginate，渲染下一页

Will_paginate, render next page

javascript

ruby-on-rails

will-paginate