[英]Infinite Scroll with Kaminari doesn't do anything
Using https://github.com/amatsuda/kaminari/wiki/How-To%3a-Create-Infinite-Scrolling-with-jQuery as a guide I have tailored the code according to my specific case but nothing happens or changes in my app. 使用https://github.com/amatsuda/kaminari/wiki/How-To%3a-Create-Infinite-Scrolling-with-jQuery作为指南,我已根据我的具体情况对代码进行了定制,但没有任何反应或更改应用程式。 The pagination with kaminari works just fine but the infinite scrolling is completely absent.
使用kaminari进行分页效果很好,但完全没有无限滚动。 Having my partials adding the extra layers of abstraction is really confusing me.
让我的partials添加额外的抽象层确实让我感到困惑。
micropost_controller.rb micropost_controller.rb
def index
@micropost = current_user.microposts.build
@microposts = Micropost.order(:created_at).page(params[:page])
end
view for micropost index.html.erb 查看micropost index.html.erb
<%= render 'shared/public_feed' %>
shared/_public_feed.html.erb shared / _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>
shared/_feed_item.html.erb shared / _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 views / microposts / index.js.erb
$("#posts").append("<ol class='page'><%= escape_javascript(render('shared/feed_item')) %></ol>");
microposts.js.coffee 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
UPDATE CODE I changed some of the classes/ids around to try and fit better with the tutorial but still no luck. 更新代码我更改了一些类/ id,以使其更适合本教程,但仍然没有运气。 Also, according to my rails console my index.js.erb isn't being rendered
另外,根据我的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)
However when I navigate to http://localhost:3000/microposts.js
I get this error in my feed_item partial 但是,当我导航到
http://localhost:3000/microposts.js
,我的feed_item部分中出现此错误
undefined local variable or method `feed_item' for #<#<Class:0xb998f134>:0xb9cd7198>
but if I replace 'shared/feed_item'
with @microposts
in the index.js.erb file I get a bunch of plain text so I assume it didn't run into any errors with the javascript. 但是,如果我在index.js.erb文件
@microposts
'shared/feed_item'
替换为'shared/feed_item'
, @microposts
得到一堆纯文本,因此我认为它不会在javascript中出现任何错误。
update 2 : according to this github issue index.js.erb isn't even used.. now I'm really confused https://github.com/amatsuda/kaminari/issues/440 更新2 :根据此github问题index.js.erb甚至没有使用..现在我真的很困惑https://github.com/amatsuda/kaminari/issues/440
update 3 I created a new app and followed the instructions exactly but removed the index.js.erb file and the demo app still functioned like it was supposed to. 更新3我创建了一个新应用,并严格按照说明进行操作,但是删除了index.js.erb文件,该演示应用仍按预期运行。 So the problem I'm having must be in my coffeescript but I'm not getting any errors in my javascript log when I run it.
因此,我遇到的问题一定是在我的coffeescript中,但是运行它时,我的JavaScript日志中没有出现任何错误。
update 4 so after installing the demo app from the guide I changed the <table>
and <tr>
elements to <div>
elements and infinite scroll stopped working. 更新4,所以从指南中安装演示应用程序后,我将
<table>
和<tr>
元素更改为<div>
元素,并且无限滚动停止了工作。 In order to get it to load work i had to resize the window smaller and then scroll down in order to trigger the event. 为了使它能够加载工作,我不得不将窗口的大小缩小,然后向下滚动以触发事件。 Not sure how this applies yet to my specific issue.
不确定如何将其应用于我的特定问题。
When using a theme for your pagination with kaminari, specifically the twitter bootstrap theme, it changes the nav tag to a div tag. 将主题用于kaminari的分页时,尤其是twitter bootstrap主题时,它将nav标签更改为div标签。 In order to get the code to work I had to change the nav.pagination selector in the coffeescrip file to div.pagination.
为了使代码正常工作,我不得不将coffeescrip文件中的nav.pagination选择器更改为div.pagination。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.