Question

使用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>

视图/微柱/ 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

更新代码 我改变了一些类/ ids来尝试更好地适应教程，但仍然没有运气。另外，根据我的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文件，演示应用仍然按照预期运行。所以我遇到的问题必须在我的coffeescript中，但是当我运行它时，我的javascript日志中没有出现任何错误。

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

Answer 1

使用主题进行kaminari分页时，特别是twitter引导程序主题，它会将nav标记更改为div标记。为了使代码生效，我不得不将coffeescrip文件中的nav.pagination选择器更改为div.pagination。

带有Kaminari的无限滚动并没有做任何事情

1 个答案: