will_paginate 无限滚动 | Rails4答案

【问题标题】：will_paginate with endless Scrolling | Rails4will_paginate 无限滚动 | Rails4
【发布时间】：2013-09-03 22:37:10
【问题描述】：

这就是解决方案

所以我使用 will_paginate / Bootstrap Will Paginate 和无限滚动。

要让分页工作：

1.) 在我的控制器中，我用

更新了我的索引操作

@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)

2.) 编辑我的索引视图：

<%= will_paginate @clips%>

完成

分页效果很好。

To Add Endless scrolling 我执行了与之前的 Rails 3 应用程序相同的步骤。

1.) 编辑我的 clips.js.coffee

jQuery ->
$('#clips-masonry').imagesLoaded ->
    $('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry

if $('.pagination').length # Thats for the Endless Scrolling
    $(window).scroll ->
        url = $('.pagination .next_page a').attr('href')
        if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
            # What to do at the bottom of the page
            $('.pagination').text("Fetching more Clips...")
            $.getScript(url)
        $(window).scroll()

2.) 使用以下命令创建 index.js.erb：

$boxes = $('<%= j render(@clips) %>')

$('#clips-masonry').append( $boxes ).imagesLoaded( function(){
  $('#clips-masonry').masonry( 'reload');
});
<% if @clips.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@clips) %>');
<% else %>
  $('.pagination').remove();
<% end %>

3.) 将 format.js 添加到我的控制器索引操作中

def index
    @clips = Clip.order("created_at desc").page(params[:page]).per_page(12)
    respond_to do |format|
        format.html
        format.js
    end
end

4.) 我的 _clip.html.erb 被 div 包裹了

 <div class="clip-box clips-masonry" data-no-turbolink>

【问题讨论】：

有什么问题？无休止的滚动分页代码将起作用（尽管它对 turbolinks 不友好） - 如果您列出错误，您可能会有所了解。
问题是它不工作:)，没有错误，无尽只是不工作:(我认为它与我必须包含在我的控制器中的 format.js 有关. 但是在 Rails 4 中，控制器发生了变化，我无法让它工作。
它对我来说很好用，我还在使用带有 format.js 的 respond_to 块。您的日志中调用的事件是什么，html？ clips?page=2 和 ClipsController#index as HTML 之类的东西？
你能把你的控制器索引操作中的 pastebin 或 gist 发给我，这样我就可以看到你是如何写下来的？是的剪辑？page=2 等。
当然——这很简单——pastebin.com/raw.php?i=Ckr5GaYi

标签： javascript ruby-on-rails twitter-bootstrap ruby-on-rails-4 will-paginate

【解决方案1】：

好的，我用我的更新问题解决了这个问题，每个偶然发现这个问题的人，这就是解决方案。

【讨论】：

【解决方案2】：

如果有人更喜欢使用 JS/JQUERY：

$(window).scroll(function() {

  var url;

  // Checks if products are currently being loaded
  if (window.pagination_loading) {
    return;
  }

  // Grabs the URL from the "next page" button 
  url = $('.pagination .next_page').attr('href')

  // Chckes if you're n height from the bottom
  if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {

    // Variable to know that you are currently loading products
    window.pagination_loading = true;

    // Text while loading
    $('.pagination').text('');

    // Run the script
    return $.getScript(url).always(function() {
      return window.pagination_loading = false;
    });

  }
});

Index.js.erb：

$products = $('<%= j render(@products) %>')

$('#productsContainer').append( $products );

<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>

index.html.erb

<div class="container">
    <%= will_paginate @products %>
</div>

控制器：

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

【讨论】：