知识点:如何实现首页内容批量显示

1.首先要安装一个gem ‘kaminari’,bundle install。 2.touch app/views/posts/index.js.erb(这个页面需要我们在里面加添js文件) touch app/views/posts/_post.html.erb(这个页面是partial) 3.在posts controller里面限定index页面的post显示数量。

  def index
    @posts = Post.page(params[:page]).per(3)
  end

4.把下面code写入_post.html.erb(<% @posts.each do |post| %> 原版删除了这行

<div class="container">
  <div class="row">
   <% @posts.each do |post| %>
     <div class="twopage-yuefan1 col-md-4">
        <div class="post-image">
          <%= link_to post_path(post) do %>
            <% if post.image.present? %>
                <%= image_tag(post.image.thumb.url, class: "thumbnail") %>
            <% else %>
                <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
            <% end %>
            <div class="classicon">
              <h1>hello</h1>
              <h3><strong>约吗</strong></h3>
              <h3><strong>我们吃个饭</strong></h3>
           </div>
         <% end %>
       </div>
     </div>
  <% end %>
 </div>
</div>

5.在index.html.erb引入这个partial

<div class="twopagebtn">
        <div id="content">
           <%= render(partial: 'post') %>(<em>collection: @posts</em>)
        </div>
        <% unless @posts.current_page == @posts.total_pages %>
          <p id="view-more">
            <%= link_to('载入更多约饭', url_for(page: @posts.current_page + 1), remote: true,  
                         class: "btn btn-success btn-lg") %>
          </p>
        <% end %>
  </div>

6.引入js文件到index.js.html

undefined method `page' for

7.在posts.coffee写入这些code(可以不需要就实现功能,这个应该是ajax技术的代码

->
  content = $('#content')    # where to load new content
  viewMore = $('#view-more') # tag containing the "View More" link

  isLoadingNextPage = false  # keep from loading two pages at once
  lastLoadAt = null          # when you loaded the last page
  minTimeBetweenPages = 5000 # milliseconds to wait between loading pages
  loadNextPageAt = 1000      # pixels above the bottom

  waitedLongEnoughBetweenPages = ->
    return lastLoadAt == null || new Date() - lastLoadAt > minTimeBetweenPages

  approachingBottomOfPage = ->
    return document.documentElement.clientHeight +
        $(document).scrollTop() < document.body.offsetHeight - loadNextPageAt

  nextPage = ->
    url = viewMore.find('a').attr('href')

    return if isLoadingNextPage || !url

    viewMore.addClass('loading')
    isLoadingNextPage = true
    lastLoadAt = new Date()

    $.ajax({
      url: url,
      method: 'GET',
      dataType: 'script',
      success: ->
        viewMore.removeClass('loading');
        isLoadingNextPage = false;
        lastLoadAt = new Date();
    })
  # watch the scrollbar
  $(window).scroll ->
    if approachingBottomOfPage() && waitedLongEnoughBetweenPages()
      nextPage()
  
  # failsafe in case the user gets to the bottom
  # without infinite scrolling taking affect.
  viewMore.find('a').click (e) ->
    nextPage()
    e.preventDefaults()

参考资料:https://www.topdan.com/ruby-on-rails/simple-infinite-scrolling.html#views https://github.com/amatsuda/kaminari