Реализация Javascript «Бесконечная страница» после Railscast 114 - PullRequest
Новая
       3

Реализация Javascript «Бесконечная страница» после Railscast 114

0 голосов
/ 18 октября 2011

У меня есть простой макет Твиттера, настроенный после урока rails, и я пытаюсь добавить «Бесконечную страницу» следующим образом: http://railscasts.com/episodes/114-endless-page

Райан использовал страницу продуктов и индекс.Однако у меня идет новостная лента, поэтому некоторые переменные нужно будет заменить.

Я заменил @products на @feed_items, но безуспешно.Это кажется таким простым для реализации, поэтому я не уверен, что делаю неправильно.

Сравнение кода:

Вот мой контроллер страниц, который был бы продуктом Райанаконтроллер 

class PagesController < ApplicationController

  def home
    @title = "Home"
    if signed_in?
      @micropost = Micropost.new
      @feed_items = current_user.feed.paginate(:page => params[:page])
    end
  end

Код Райана: 

def index
  @products = Product.paginate(:page => params[:page], :per_page => 15)
end

Мой index.js.rjs (здесь может быть проблема?) 

page.insert_html :bottom, :feed_item, :partial => @feed_items
if @feed_items.total_pages > @feed_items.current_page
  page.call 'checkScroll'
else
  page[:loading].hide
end

Код Райана 

page.insert_html :bottom, :products, :partial => @products
if @products.total_pages > @products.current_page
   page.call 'checkScroll'
else
   page[:loading].hide
end

Application_helper.rb (идентично Райану) 

def javascript(*args)
  content_for(:head) { javascript_include_tag(*args) }
end

_feed.html.erb 

<% unless @feed_items.empty? %>
<% javascript :defaults, 'endless_page' %>
  <table class="microposts" summary="User microposts">
    <%= render :partial => 'shared/feed_item', :collection => @feed_items %>
  </table>
<% end %>
<p id="loading">Loading more page results...</p>

index.html Райана.erb 

<% title "Products" %>
<% javascript :defaults, 'endless_page' %>

<div id="products">
  <%= render :partial => @products %>
</div>
<p id="loading">Loading more page results...</p>

endless_page.js [идентично Райану] (проблема может заключаться в ссылке на строку /products.js. Я попытался перейти на feed.js, но безуспешно). 

var currentPage = 1;

function checkScroll() {
  if (nearBottomOfPage()) {
    currentPage++;
    new Ajax.Request('/products.js?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
  } else {
    setTimeout("checkScroll()", 250);
  }
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 150;
}

function scrollDistanceFromBottom(argument) {
  return pageHeight() - (window.pageYOffset + self.innerHeight);
}

function pageHeight() {
  return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}

document.observe('dom:loaded', checkScroll);

1 Ответ

2 голосов
/ 30 декабря 2011

Я довольно новичок в рельсах и пытаюсь сделать что-то подобное. но ваш запрос GET наверняка должен идти к вашему контроллеру, а не к тому, что в учебнике. может быть, вам нужен рендер для формата .js в вашем контроллере?

Я думаю, что вместо этого мы будем использовать jquery, но сегодня я попробую это и сообщу вам, если что-нибудь найду.

--- обновление. Я попробовал это, и это работало нормально. я думаю, что у руководства были маршруты, настроенные как ресурсы. Это, вероятно, где вы застряли. Надеюсь, это работает для вас.

...