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:...>方法正在等待{ {1}}，而不是will_paginate，这就是您提供的内容：

请尝试将其替换为ActiveRecord_Relation：

ActionView::OutputBuffer

Here有一个回购，看它是如何运作的。

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

1 个答案: