최근 루비온 레일스에서 API 결과를 표시하는 무한 스크롤 화면을 만들 기회가 생겼는데, 페이지 캡처용 젬을 찾다가'Pagy'를 알게 됐다.페이지 디자인의 젬으로 유명한 것은'카미나리'와'윌 파게네트'인데 이런 젬에 비해'파게티'는 성능 면에서 중점을 두고 개발된 것이어서 관심이 많다.

의 목적

Pagy의 공식 문서가 충실하지만 일본어 정보가 적으니 이번에는'Pagy'사용법을 소개한다.또 PAFOR에 대한 기준 테스트 결과가 Giithub에 실렸으니 관심 있는 분들은 저쪽을 보세요.

https://github.com/ddnexus/pagy

할 일

Pagy를 사용한 페이지 하이픈

Infinite-Scroll Plugin을 사용한 무한 스크롤

데이터

이번에는 모델로부터 얻은 데이터가 아니라 API가 응답한 데이터를 페이지로 식별했다.API에서 받은 JSON 데이터를 Hash로 변환한 후 Pagy에 배열된 이미지로 전달합니다.또한 이번 목적은 Pagy를 활용하기 위해 API를 실제로 준비하지 않고 Controller 내에서 배열 데이터를 직접 정의하는 것이다.

컨디션

이 글은 다음과 같은 환경을 사용합니다.

Ruby 2.4.1

Rails 5.1.6

Pagy 2.1.3

Slim 4.0.1

Pagy 설치

먼저 Gemfile에 "pagy"를 추가합니다.
Gemfile

gem 'pagy'

Gem을 추가한 후 설치합니다.
bash

bundle install --path vendor/bundle

Controller 설정

Controller에 Pagy의 Backend 모듈을 포함합니다.
app/controllers/contents_controller.rb

class ContentsController < ApplicationController
  include Pagy::Backend
end

Helper 구성

Helper에 Pagy를 포함하는 Fronted 모듈입니다.
app/helpers/contents_helper.rb

module ContentsHelper
  include Pagy::Frontend
end

Pagy의 초기 파일 만들기

초기 파일을 만들면 기본값에서 Pagy 설정을 변경할 수 있습니다.예를 들어 한 페이지에 표시되는 데이터 건수를 지정하거나 국제화에 대응하는 설정을 설정할 수 있다.
이번에는 그룹에 대한 페이지 표시에 필요한 프로그램 라이브러리만 읽습니다.
다른 설정 가능한 항목을 알고 싶으신 분들은 Pagy의github에 공개된 것을 보십시오.

https://github.com/ddnexus/pagy/blob/master/lib/config/pagy.rb

config/initializers/pagy.rb

require 'pagy/extras/array'

붙여넣기 처리된 설치

스토리지를 페이지로 나누려면 pagy -호출 처리를 할 그룹을 aray에 건네주고 뷰에서 이 반환 값을 사용합니다.또한 해싱 열을 선택적 매개변수로 전송하여 다양한 지정을 수행할 수 있습니다.다음 견본의'items:3'은 페이지당 표시되는 데이터 수가 3개임을 나타낸다.옵션 매개변수에서 지정할 수 있는 내용은 Pagy의 초기 파일로도 정의할 수 있습니다.
위에서 말한 바와 같이 호출할 데이터는 define입니다.직접 데이터 방법으로 정의합니다.
app/controllers/contents_controller.rb

class ContentsController < ApplicationController
  include Pagy::Backend

  def search
    @api_results = define_data
    @pagy, @api_results = pagy_array(@api_results, items: 3)
  end

  def define_data
    results = [
      { id:  1, content: 'test data 01', date: '2019/04/01 10:01:00' },
      { id:  2, content: 'test data 02', date: '2019/04/01 10:02:00' },
      { id:  3, content: 'test data 03', date: '2019/04/01 10:03:00' },
      { id:  4, content: 'test data 04', date: '2019/04/01 10:04:00' },
      { id:  5, content: 'test data 05', date: '2019/04/01 10:05:00' },
      { id:  6, content: 'test data 06', date: '2019/04/01 10:06:00' },
      { id:  7, content: 'test data 07', date: '2019/04/01 10:07:00' },
      { id:  8, content: 'test data 08', date: '2019/04/01 10:08:00' },
      { id:  9, content: 'test data 09', date: '2019/04/01 10:09:00' },
      { id: 10, content: 'test data 10', date: '2019/04/01 10:10:00' },
      { id: 11, content: 'test data 11', date: '2019/04/01 10:11:00' },
      { id: 12, content: 'test data 12', date: '2019/04/01 10:12:00' },
      { id: 13, content: 'test data 13', date: '2019/04/01 10:13:00' },
      { id: 14, content: 'test data 14', date: '2019/04/01 10:14:00' },
      { id: 15, content: 'test data 15', date: '2019/04/01 10:15:00' },
      { id: 16, content: 'test data 16', date: '2019/04/01 10:16:00' },
      { id: 17, content: 'test data 17', date: '2019/04/01 10:17:00' },
      { id: 18, content: 'test data 18', date: '2019/04/01 10:18:00' },
      { id: 19, content: 'test data 19', date: '2019/04/01 10:19:00' },
      { id: 20, content: 'test data 20', date: '2019/04/01 10:20:00' },
      { id: 21, content: 'test data 21', date: '2019/04/01 10:21:00' },
      { id: 22, content: 'test data 22', date: '2019/04/01 10:22:00' },
      { id: 23, content: 'test data 23', date: '2019/04/01 10:23:00' },
      { id: 24, content: 'test data 24', date: '2019/04/01 10:24:00' },
      { id: 25, content: 'test data 25', date: '2019/04/01 10:25:00' },
      { id: 26, content: 'test data 26', date: '2019/04/01 10:26:00' },
      { id: 27, content: 'test data 27', date: '2019/04/01 10:27:00' },
      { id: 28, content: 'test data 28', date: '2019/04/01 10:28:00' },
      { id: 29, content: 'test data 29', date: '2019/04/01 10:29:00' },
      { id: 30, content: 'test data 30', date: '2019/04/01 10:30:00' }
    ]
  end
end

이렇게 하면 붙여넣을 데이터를 준비할 수 있고, 다음에 보기 측면의 처리를 쓸 수 있다.게다가 div 라벨의'contents'ID와'contentent'의class 이름은 임의이지만 무한 스크롤 설치 시 자바스크립트 옆에서 사용하기 때문에 변경할 때 주의하십시오.
app/views/contents/search.html.slim

#contents
  .content
    - @api_results.map do |result|
      div
        = "内容：#{result[:content]}  |  作成日時：#{result[:date]} "
== pagy_nav @pagy

페이지 스타일 확인

여기에 설치하면 다음과 같은 스티커를 할 수 있을 것입니다.
2, 3, Prev, Next가 작동하는지 확인합니다.

무한 스크롤 가져오기

만든 페이지를 무한 스크롤로 변경합니다.
우선, 다음 설명에서부터 자바스크립트의 플러그인을 가져와 "app/assets/javascript/"의 바로 아래에 설정합니다.

https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js

그런 다음 무한 스크롤을 수행하는 View에 해당하는 JavaScript를 만듭니다.
app/assets/javascripts/contents.js

$(document).on('turbolinks:load', function () {
  $('#contents').infiniteScroll({
    path: "nav.pagination a[rel=next]",
    append: ".content",
    hideNav: '.pagination',
    history: false,
    prefill: true,
    status: '.page-load-status'
  })
});

지정한 옵션의 뜻은 다음과 같다.

path: "nav.pagination a [rel=next]"...다음 페이지로 링크 지정

appeend: ".content"...추가할 요소 지정

hideNav: '.pagination'...붙여넣기 내비게이션 숨기기

history: 페이지마다 브라우저의 역사와 URL을 바꾸지 않습니다

prefill: 진···초기화 시 탑재, 추가 요소

status: '.페이지 읽기 상태를 나타내는 상태 요소 표시

마지막으로 JQuery 읽기로 설정합니다.
app/assets/javascripts/application.js

//= require jquery

무한 스크롤 동작 확인

화면을 다시 확인하면 무한 스크롤이 가능할 것 같다.
만약 순조롭게 돌아가지 못하면 슬림의 축소, div 라벨의 ID와class 이름을 확인하십시오.

소스 코드

실제 손에서 코드를 이동하고 싶은 사람은 아래에서부터 클론을 사용하세요.

https://github.com/zetton-31/sample_with_pagy_and_inifite-scroll

참고 자료

https://ddnexus.github.io/pagy/index

https://github.com/metafizzy/infinite-scroll

https://techracho.bpsinc.jp/hachi8833/2018_06_05/57481