Rails 5使用will_paginate创建一个加载更多按钮

Question

所以我试图创建一个更多的加载按钮（不是无限滚动，虽然一些简单的js调整可以使它如此）。 我在Rails 5中使用了will_paginate gem。

它目前全部按预期工作，除非我点击加载更多它加载下一页帖子两次，例如： 加载更多>帖子4，帖子5，帖子6，帖子4，帖子5，帖子6

仅供参考我的'帖子'是@links：

links_controller.erb

def index
  @links = Link.order('created_at DESC').paginate(:page => params[:page], :per_page => 3)
  respond_to do |format|
    format.html
    format.js
  end
end

视图/链接/ index.html.erb

<div class="link-wrap">
  <%= render @links %>
</div>
<% if @links.next_page %>
  <div class="link more">
    <%= link_to 'Load More', links_path(:page => @links.next_page), :class => 'next_page', :remote => true if @links.next_page %>
  </div>
<% end %>

pagination.js.coffee

$ ->
  $('.next_page').on 'click', (e) ->
   e.preventDefault()
   url = $(this).attr('href')
   $.getScript(url)

index.js.erb的

$('.link-wrap').append('<%= j render(@links) %>');
<% if @links.next_page %>
  $('.next_page').attr('href','<%= links_path(:page => @links.next_page) %>');
<% else %>
  $('.more').remove();
<% end %>

对于我的生活，我无法弄清楚为什么当点击“加载更多”时它会两次渲染链接。 这似乎是一件非常简单的事情，但我正在努力。

Answer 1

如果您检查服务器控制台，您实际上可以看到两个请求进入，一个由您的:remote => true enabled链接触发，另一个来自您的自定义ajax。 实际上你不需要任何js来完成这项工作。 只需从pagination.js.coffee删除该click函数，或从链接中删除:remote => true 。 毕竟两个人都在做同样的事情。 希望这会有所帮助。

Answer 2

所以这当然是一个愚蠢的错误。

删除index.html.erb上的行：

:remote => true if @links.next_page

所以现在它看起来像这样：

<div class="link-wrap">
  <%= render @links %>
</div>
<% if @links.next_page %>
  <div class="link more">
  <%= link_to 'Load More', links_path(:page => @links.next_page), :class => 'next_page' %>
  </div>
<% end %>

一切正常！