无限卷轴与 Kaminari 没有任何作用答案

【问题标题】：Infinite Scroll with Kaminari doesn't do anything无限卷轴与 Kaminari 没有任何作用
【发布时间】：2014-05-21 22:27:24
【问题描述】：

使用https://github.com/amatsuda/kaminari/wiki/How-To%3a-Create-Infinite-Scrolling-with-jQuery 作为指导，我根据我的具体情况定制了代码，但我的应用程序没有任何反应或变化。 kaminari 的分页效果很好，但完全没有无限滚动。让我的部分添加额外的抽象层真的让我感到困惑。

micropost_controller.rb

def index
  @micropost  = current_user.microposts.build
  @microposts = Micropost.order(:created_at).page(params[:page])
end

查看微博 index.html.erb

<%= render 'shared/public_feed' %>

共享/_public_feed.html.erb

<div id="posts">
<% if @microposts.any? %>
  <ol class="page">
    <%= render partial: 'shared/feed_item', collection: @microposts %>
  </ol>
<% end %>

<%= paginate @microposts, :theme => 'twitter-bootstrap', :pagination_class => "pagination-sm" %>
</div>

共享/_feed_item.html.erb

<div class="post">
<li id="<%= feed_item.id %>">
    <%= link_to gravatar_for(feed_item.user), feed_item.user %>
    <span class="user">
      <%= link_to feed_item.user.name, feed_item.user %>
    </span>
    <span class="content">
      <%= feed_item.content %>
    </span>
    <span class="timestamp">
      Posted <%= time_ago_in_words(feed_item.created_at) %> ago.
    </span>
  <% if current_user?(feed_item.user) %>
    <%= link_to "delete", feed_item, method: :delete,
                                     data: { confirm: "You sure?" },
                                     title: feed_item.content %>
  <% end %>
</li>
</div>

views/microposts/index.js.erb

$("#posts").append("<ol class='page'><%= escape_javascript(render('shared/feed_item')) %></ol>");

microposts.js.coffee

$(document).ready ->
  $("#microposts .page").infinitescroll
    navSelector: "nav.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "nav.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#posts div.post" # selector for all items you'll retrieve

更新代码 我更改了一些类/ID，以尝试更好地适应本教程，但仍然没有运气。另外，根据我的 rails 控制台，我的 index.js.erb 没有被渲染

  Rendered shared/_feed_item.html.erb (595.7ms)
  (1.4ms)  SELECT COUNT(*) FROM "microposts"
  Rendered shared/_public_feed.html.erb (1140.4ms)
  Rendered microposts/index.html.erb within layouts/application (1210.7ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (1.1ms)
  Rendered layouts/_footer.html.erb (0.3ms)

但是，当我导航到 http://localhost:3000/microposts.js 时，我的 feed_item 部分出现了这个错误

undefined local variable or method `feed_item' for #<#<Class:0xb998f134>:0xb9cd7198>

但如果我在 index.js.erb 文件中将 'shared/feed_item' 替换为 @microposts，我会得到一堆纯文本，所以我认为它没有遇到任何 javascript 错误。

更新 2：根据这个 github 问题 index.js.erb 甚至没有使用.. 现在我真的很困惑 https://github.com/amatsuda/kaminari/issues/440

更新 3 我创建了一个新应用程序并完全按照说明进行操作，但删除了 index.js.erb 文件，并且演示应用程序仍然可以正常运行。所以我遇到的问题一定是在我的咖啡脚本中，但是当我运行它时，我的 javascript 日志中没有出现任何错误。

更新 4 因此，在安装指南中的演示应用程序后，我将 <table> 和 <tr> 元素更改为 <div> 元素，无限滚动停止工作。为了让它加载工作，我不得不将窗口调整得更小，然后向下滚动以触发事件。不确定这如何适用于我的具体问题。

【问题讨论】：

标签： javascript ruby-on-rails-4 infinite-scroll kaminari

【解决方案1】：

当使用 kaminari 进行分页主题时，特别是 twitter 引导主题，它会将 nav 标签更改为 div 标签。为了让代码正常工作，我不得不将咖啡脚本文件中的 nav.pagination 选择器更改为 div.pagination。

【讨论】：