이게 뭐야

1화면에 복수 모델을 표시하는 SPA 같은 Rails 앱으로 화면 천이 없이 추가 로드하고 싶다,
하지만 React와 Angular는 잘 모른다.
라는 사람을 위한 기사입니다.

GitHub에는 작성된 소스 코드가 있습니다.

무엇을 사용하는가

kaminari와 jQuery, jquery.infinitscroll을 사용하여 모델의 추가 로딩을 구현합니다.

어떻게 될까

이런 느낌이 듭니다.

어떻게 해야

앱 만들기

명령

$ rails new multi-model-infinitscroll --skip-bundle &&
  cd multi-model-infinitscroll

시끄러운

kaminari 및 jquery-turbolinks 설치

Gemfile

#追記
gem "jquery-turbolinks"
gem "kaminari"

명령

$ bundle install

jquery.infinitscroll 다운로드

명령

$ curl -k -o vendor/assets/javascripts/jquery.infinitescroll.js \
 https://raw.githubusercontent.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js

Asset Pipeline에 jquery-turbolinks 및 jquery.infinitscroll 추가

app/assets/javascripts/application.js

#追記
//= require jquery.turbolinks
//= require jquery.infinitescroll

모델 준비

모델 만들기

명령

$ rails g model Hoge name description &&
  rails g model Piyo name description &&
  rails db:migrate

초기 데이터 투입

db/seeds.rb

#追記
1000.times do |i|
  Hoge.create!(name: 'Hoge' + i.to_s, description: 'This is Hoge ' + i.to_s)
  Piyo.create!(name: 'Piyo' + i.to_s, description: 'This is Piyo ' + i.to_s)
end

명령

$ rails db:seed

컨트롤러 준비

메인 화면이 되는 Controller를 작성

명령

$ rails g controller home home

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def home

    #下記追記

    #普通のアクセスの時に実行
    @hoges = Hoge.page(params[:hoge_page]) if params[:piyo_page].blank?
    @piyos = Piyo.page(params[:piyo_page]) if params[:hoge_page].blank?
    #*_pageが渡された時はもう片方は不要なのでif文でDBへのアクセスを軽減

    #追加読み込み時に実行、レイアウト無しでデータのみを返す
    unless params[:hoge_page].blank?
      return render @hoges, layout: false
    end
    unless params[:piyo_page].blank?
      return render @piyos, layout: false
    end

  end
end

라우팅 설정

config/routes.rb

Rails.application.routes.draw do
  get 'home/home' #要らないので任意で削除

  root to: 'home#home' #追記
end

모델 로드용 Controller 작성

이것은 없어도 움직이므로 임의로 작성해 주세요.

명령

$ rails g controller hoges &&
  rails g controller piyos

View 준비

홈 뷰 편집

app/views/home/home.html.erb

<div id='hoge_container'>
  <table id="hoges">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
    </thead>

    <tbody class="page">
      <%= render @hoges %>
    </tbody>
  </table>

  <br>
  <%= paginate @hoges, remote: true, param_name: :hoge_page %>
</div>

<div id='piyo_container'>
  <table id="piyos">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
    </thead>

    <tbody class="page">
      <%= render @piyos %>
    </tbody>
  </table>

  <br>
  <%= paginate @piyos, remote: true, param_name: :piyo_page %>
</div>

hoge 템플릿 만들기

app/views/hoge/_hoge.html.erb

<tr class="hoge">
  <td><%= hoge.name %></td>
  <td><%= hoge.description %></td>
</tr>

piyo 템플릿 만들기

app/views/piyo/_piyo.html.erb

<tr class="piyo">
  <td><%= piyo.name %></td>
  <td><%= piyo.description %></td>
</tr>

CSS 편집

app/assets/stylesheets/application.css

/*追記*/
#infscr-loading, .pagination {
  width: 0;
  display: none;
}

#hoge_container, #piyo_container{
  float: left;
  margin: 10px 50px;
  padding: 10px 50px;
}

thead, tbody {
  display:block;
}

tbody {
  overflow-y:scroll;
  height:500px;
}

infinitescroll 설정

behaviors와 binder를 지정하는 것으로 윈도우가 아니고 특정의 요소가 아래까지 스크롤 되었을 때에 추가 읽어들이기를 실행합니다.

app/assets/javascripts/home.coffee

#追記
$ ->
  $("#hoges .page").infinitescroll
    loading: {
      img: ""
      msgText: ""
      finishedMsg: ""
    }
    animate: true
    navSelector: "#hoge_container nav.pagination"
    nextSelector: "#hoge_container nav.pagination a[rel=next]"
    itemSelector: "tr.hoge"
    behaviors: "local"
    binder: $("#hoge_container .page")

$ ->
  $("#piyos .page").infinitescroll
    loading: {
      img: ""
      msgText: ""
      finishedMsg: ""
    }
    animate: true
    navSelector: "#piyo_container nav.pagination"
    nextSelector: "#piyo_container nav.pagination a[rel=next]"
    itemSelector: "tr.piyo"
    behaviors: "local"
    binder: $("#piyo_container .page")

실행

명령

$ rails s

localhost:3000/ 로 이동하여 동작을 확인해 보십시오.

각각을 스크롤하여 자동으로 추가 로드되면 성공입니다.

요약

자바스크립트 프레임워크를 공부합시다.

참고

Infinite Scroll

Rails에서 Infinite Scroll과 kaminari를 사용하여 스크롤하여 동적으로 페이지로드 기능 구현

【Ruby On Rails】infinit scroll과 kaminari에 의한 무한 스크롤의 구현