簡體   English   中英

無休止的滾動不起作用

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM