生成主题后无限滚动停止工作答案

【问题标题】：Endless scrolling stops working after generating theme生成主题后无限滚动停止工作
【发布时间】：2014-11-17 16:11:54
【问题描述】：

我一直在关注#114 Endless Scrolling Railscast (http://railscasts.com/episodes/114-endless-page-revised)，并且我已经获得了与 Kaminari 一起使用的无限滚动功能。

但是，当我为 Foundation 生成主题时，无限滚动功能停止工作，而是显示分页。

products.js.coffee

jQuery ->
  if $('.pagination').length
      $(window).scroll ->
              url = $('.pagination .next a').attr('href')
              if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                      $('.pagination').text('Fetching more products...')
                      $.getScript(url)
$(window).scroll()

index.html.erb

   <div id="products">
    <%= render "products" %>
   </div>

   <div class="row">
    <div class="small-12 columns">
      <%= paginate @products, window: 2 %>
    </div>
   </div>

index.js.erb

$('#products').append('<%= j render "products" %>');
<% if @ products %>
  $('.pagination').replaceWith('<%= j paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

生成基础视图https://github.com/amatsuda/kaminari_themes/tree/master/foundation

rails g kaminari:views foundation

为什么生成的视图会阻止无休止的滚动工作？谢谢。

编辑

我使用的是 Foundation 5 和 Kaminari gem，而不是 will_paginate。

宝石文件

source 'https://rubygems.org'
ruby '2.1.3'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.6'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

gem 'friendly_id', '~> 5.0.0'
gem 'pg_search'
gem 'actionpack-page_caching'
gem 'rails-observers'

gem 'foundation-rails'
gem 'rails_12factor', group: :production
gem 'jquery-turbolinks'
gem "font-awesome-rails"
gem 'kaminari'

【问题讨论】：

标签： jquery ruby-on-rails zurb-foundation infinite-scroll kaminari

【解决方案1】：

我设法弄清楚出了什么问题。

通过生成 Foundation 视图，我需要将 products.js.coffee 更改为：

jQuery ->
  if $('.pagination').length
          $(window).scroll ->
                  url = $('ul.pagination a[rel=next]').attr('href')
                  if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
                          $('.pagination').text('Fetching more products...')
                          $.getScript(url)
    $(window).scroll()

注意url的变化。

【讨论】：