Rails 5：使用 will_paginate gem 实现无限滚动。内部服务器错误

Question

我正在尝试采用本教程来处理我的应用程序：https://www.sitepoint.com/infinite-scrolling-rails-basics/

这是我的文件分解：

# views/events/index.html.erb
<table class="table table-hover">
  <thead>
    <tr>
      <th width="25%">Events</th>
      <th class="package-column">Packages</th>
      <th>Capacity</th>
      <th width="30%">Date</th>
    </tr>
  </thead>

  <tbody id="hits">
    <%= render partial: 'event_row', locals: { events: @events } %>
  </tbody>
</table>
<div id="infinite-scrolling">
  <%= will_paginate %>
</div>

# views/events/index.js.erb
$('#hits').append('<%= j render partial: 'event_row', events: @events %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(render partial: 'event_row', events: @events) %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

# app/assets/javascripts/pagination.js
jQuery(function() {
  if ($('#infinite-scrolling').size() > 0) {
    return $(window).on('scroll', function() {
      var more_posts_url; // <- /events?page=2
      more_posts_url = $('.pagination .next_page').attr('href');
      console.log(more_posts_url);
      if (more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 250) {
        $('.pagination').html('<i class="fa-li fa fa-spinner fa-spin">');
        $.getScript(more_posts_url);
      }
      return;
    });
  }
});


# events/_event_row.html.erb
<% @events.each do |event| %>
  <tr class="event-row" data-started="<%= event.started_at%>">
    <td class="event-title-text" data-logo="<%= event.platform_type %>" data-url="<%= event.platform_url %>" data-identifier="<%= event.id %>" ><%= link_to event.title, event_path(event), remote: true %><img src="" alt=""></td>
      <td class="package-column">
      <% if event.packages.any? %>
        <div>
        <% event.packages.each do |p| %>
         <%= image_tag "http://assets.gathrly.com/needs-#{p.kind}.png", :alt => "#{p.kind}", class: "package-image" %>
        <% end %>
        </div>
      <% else %>
        <div class="package-column"><span>...</span></div>
    <% end %>
    </td>
    <td><%= event.capacity %></td>
    <td><%= frmt_start_time(event) if event.started_at? %></td>
  </tr>
<% end %>

我似乎用 pagination.js 文件触发了事件。当我滚动到底部时，我在 chrome 窗口中收到以下错误：

VM20694:1 GET http://localhost:3000/events?page=2&_=1492558098709 500 (Internal Server Error)

我的终端出现以下错误：

ActionView::Template::Error (undefined local variable or method `events' for #<#<Class:0x0055765f58b5f8>:0x007f4101a75af0>):
1: <% events.each do |event| %>
2:   <tr class="event-row" data-started="<%= event.started_at%>">
3:     <td class="event-title-text" data-logo="<%= event.platform_type %>" data-url="<%= event.platform_url %>" data-identifier="<%= event.id %>" ><%= link_to event.title, event_path(event), remote: true %><img src="" alt=""></td>
4:       <td class="package-column">

所以我不太明白这里的错误。如果我打开一个新窗口并访问http://localhost:3000/events?page=2&_=1492558098709，我将被带到下一组 10 场活动中，看起来还不错。

我也没有收到控制台错误，因为该模板在我最初加载页面时工作正常。然后，当它尝试加载下一组 10 个事件时，它给了我一个模板错误。

任何解决此问题的帮助都会很棒。我猜我没有在 JS 的某个地方正确传递 events ..

编辑：

我说得更远了

我将我的index.js.erb 文件编辑为：

$('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate render partial: 'event_row', locals: { events: @events } %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

现在我收到以下错误：

ActionView::Template::Error (undefined method `total_pages' for #<ActionView::OutputBuffer:0x007f3667108e80>):
    1: $('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
    2: <% if @events.next_page %>
    3:   $('.pagination').replaceWith('<%= j will_paginate(render partial: 'event_row', locals: { events: @events }) %>');
    4: <% else %>
    5:   $(window).off('scroll');
    6:   $('.pagination').remove();

我猜它现在与 will_paginate 相关。

Answer 1

我试图重现您的问题，但我意识到通过您对 replaceWith 函数的调整，它引发了 undefined method 'total_pages' for #<ActionView::OutputBuffer:...> 错误，这是因为 will_paginate 方法正在等待 ActiveRecord_Relation，而不是 @ 987654326@，这就是你给它的：

尝试将其替换为 j will_paginate:

$('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate %>');
<% else %>
  ...
<% end %>

Here 有一个 repo 看看它是如何工作的。