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

big*_*dot 5 javascript ruby-on-rails will-paginate ruby-on-rails-5

所以我正在尝试创建一个加载更多按钮(不是无限滚动,尽管一些简单的 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
Run Code Online (Sandbox Code Playgroud)

意见/链接/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 %>
Run Code Online (Sandbox Code Playgroud)

pagination.js.coffee

$ ->
  $('.next_page').on 'click', (e) ->
   e.preventDefault()
   url = $(this).attr('href')
   $.getScript(url)
Run Code Online (Sandbox Code Playgroud)

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 %>
Run Code Online (Sandbox Code Playgroud)

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

big*_*dot 1

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

删除index.html.erb上的行:

:remote => true if @links.next_page
Run Code Online (Sandbox Code Playgroud)

所以现在看起来像这样:

<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 %>
Run Code Online (Sandbox Code Playgroud)

现在一切正常!