Question

我一直在关注＃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。

的Gemfile

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'

Answer 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()

请注意网址的变化。

生成主题后，无尽的滚动停止工作

1 个答案: