Will_paginate，呈现下一页

Question

我正在使用will_paginate gem来分页帖子。 而且我想做无限滚动。 我很少看视频并阅读了几篇文章，但这并不是我真正需要的（因为我的应用程序结构）。 您会看到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 （它将返回错误（缺少部分帖子/ _post））和@ posts.next_page （将返回2）和＃{posts_path（@post）}？page=#{@post.current_page +1}（但这也不起作用）和其他问题。

您能帮我吗，我需要在j渲染中添加一些内容以便渲染下一页？

更新

我用RailCast视频重做了所有内容，就像@Szilard Magyar告诉我一样，但是现在它始终呈现相同的内容（第一页），而根本不呈现第二页，怎么会出现这样的问题？

更新

跟随铁路广播视频（重新设计我的应用程序结构），出现一个新问题：

我的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，则它将始终呈现第二页，而永远不会呈现第三页。 在.scroll事件下，我们必须将url移低一些，它将始终检查呈现了什么页面。 像这样：

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

顺便说一句，我将建议所有人（如果他们使用的是RailsCast教程中的 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 = $('.pagination .next_page a').attr('href') url变量中，您需要添加a ，所以它看起来像url = $('.pagination .next_page a').attr('href') ，而不像RailsCast教程中那样 ： url = $('.pagination .next_page').attr('href')