[英]endless scrolling does not work
更新:我的Github存储库https://github.com/Marc585/smartforce2
我刚刚完成了onemonthrails教程。 在最后一章中,它涉及无限滚动。 我三倍检查我的代码,但它不起作用。 我没有收到任何错误。 它什么也没做。 我正在建立一个pinterest克隆,然后滚动到底部,它应该加载下一页的图钉。
这是我的pins.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
$('#pins').imagesLoaded ->
$('#pins').masonry itemSelector: ".box"
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page a').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
# What to do at the bottom of the page
$('.pagination').text("Fetching more pins...")
$.getScript(url)
$(window).scroll()
这是我的index.js.erb
$boxes = $('<%= j render(@pins) %>')
$('#pins').append( $boxes ).imagesLoaded( function(){
$('#pins').masonry( 'reload');
});
<% if @pins.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
<% else %>
$('.pagination').remove();
<% end %>
这是我的Pins控制器:
class PinsController < ApplicationController
before_filter :authenticate_user!, except: [:index]
# GET /pins
# GET /pins.json
def index
@pins = Pin.order("created_at desc").page(params[:page]).per_page(20)
respond_to do |format|
format.html # index.html.erb
format.json { render json: @pins }
format.js
end
end
# GET /pins/1
# GET /pins/1.json
def show
@pin = Pin.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @pin }
end
end
# GET /pins/new
# GET /pins/new.json
def new
@pin = current_user.pins.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: @pin }
end
end
# GET /pins/1/edit
def edit
@pin = current_user.pins.find(params[:id])
end
# POST /pins
# POST /pins.json
def create
@pin = current_user.pins.new(params[:pin])
respond_to do |format|
if @pin.save
format.html { redirect_to @pin, notice: 'Pin was successfully created.' }
format.json { render json: @pin, status: :created, location: @pin }
else
format.html { render action: "new" }
format.json { render json: @pin.errors, status: :unprocessable_entity }
end
end
end
# PUT /pins/1
# PUT /pins/1.json
def update
@pin = current_user.pins.find(params[:id])
respond_to do |format|
if @pin.update_attributes(params[:pin])
format.html { redirect_to @pin, notice: 'Pin was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: "edit" }
format.json { render json: @pin.errors, status: :unprocessable_entity }
end
end
end
# DELETE /pins/1
# DELETE /pins/1.json
def destroy
@pin = current_user.pins.find(params[:id])
@pin.destroy
respond_to do |format|
format.html { redirect_to pins_url }
format.json { head :no_content }
end
end
end
我的开发人员工具发出的错误消息https://www.dropbox.com/s/odqknmw7np1f4cv/Bildschirmfoto%202013-08-31%20um%2014.34.40.png
你不见了
在pin_controller.rb中的show动作中使用format.js。 这是来自一个月的rails注释
注意:您必须创建一个类似的show.js.erb并将format.js选项添加到users#show操作中,以使无尽的滚动也可以在用户的个人资料页面上工作
def show
@pin = Pin.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @pin }
format.js
end
end
您的show.js.erb应该看起来像这样
boxes = $('<%= j render(@pins) %>')
$('#pins').append( $boxes ).imagesLoaded( function(){
$('#pins').masonry( 'reload');
});
<% if @pins.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
<% else %>
$('.pagination').remove();
<% end %>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.