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 render 中，以便它呈现下一页吗？

更新

我使用RailCast视频重写了所有内容，就像@Szilard Magyar告诉我要做的那样，但是现在它一直在渲染相同的（第一页）并且它根本不渲染第二页，是什么会造成这样的问题？

更新

关注轨道广播视频（重新设计我的应用结构），然后会出现一个新问题：

我的家.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')

顺便说一句，我会建议所有人（如果他们使用described in the documentation Node.js中的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教程：{ {1}}

Will_paginate，渲染下一页

2 个答案: