ต่อจากบทความ Pagination with Pagy ก็พยายามจะนำ Pagy มาใช้ในโปรแกรมใบลา โดยส่วนหนึ่งของโปรแกรมจะมีการแสดงข้อมูลประวัติการลาซึ่งทำเป็น pagination แบบ infinite scroll เริ่มแรกนั้นเราพยายามจะใช้ Turbo เข้ามาใช้ในการแสดงผล และใช้ Stimulus ร่วมกับ IntersectionObserver ตามไอเดียจากบทความ Adventure in infinite scrolling
ผลลัพท์ที่ได้ก็ได้อย่างที่ต้องการ ดังแสดงในภาพด้านล่าง แต่โค้ดที่ออกมานั้นไม่ค่อยจะสวยเท่าไหร่ สังเกตได้จากการที่โค้ด turbo-frame ซ้อนๆ กันไปเรื่อยๆ ซึ่งแต่ละ turbo-frame จะเป็นข้อมูลของแต่ละหน้า รวมถึงเมื่อทำการรีเฟรชหน้าจอข้อมูลก็ไปเริ่มที่หน้าแรกใหม่ทุกครั้ง
ผลลัพท์ที่ได้ก็ได้อย่างที่ต้องการ ดังแสดงในภาพด้านล่าง แต่โค้ดที่ออกมานั้นไม่ค่อยจะสวยเท่าไหร่ สังเกตได้จากการที่โค้ด turbo-frame ซ้อนๆ กันไปเรื่อยๆ ซึ่งแต่ละ turbo-frame จะเป็นข้อมูลของแต่ละหน้า รวมถึงเมื่อทำการรีเฟรชหน้าจอข้อมูลก็ไปเริ่มที่หน้าแรกใหม่ทุกครั้ง
เมื่อเป็นดังนี้ก็ต้องศึกษาหาวิธีใหม่ที่จะทำให้ infinite scroll ดีกว่านี้ และในเวอร์ชันล่าสุดก็สามารถทำให้โค้ดเราดูดีขึ้นโดยข้อมูลของแต่ละหน้าจะถูกรวบและจัดการให้อยู่ภายใต้ turbo-frame หลักเพียงตัวเดียวเท่านั้น นอกจากนี้เมื่อทำการรีเฟรชหน้าเว็บสามารถแสดงหน้าปัจจุบัน และตำแหน่งปัจจุบันที่ scroll ไปได้อีกด้วย
สำหรับโค้ดในฝั่ง Stimulus ก็จะประมาณนี้
import { Controller } from "stimulus" export default class extends Controller { static targets = ["nextPageLink"] connect() { if (this.hasNextPageLinkTarget) { this.observeNextPageLink() } } observeNextPageLink() { let options = { root: null, rootMargin: "300px 0px 0px 0px", threshold: 0, } let observer = new IntersectionObserver(([ entry ], observer) => { if (entry.isIntersecting) { this.nextPageLinkTarget.click() observer.disconnect() } }, options) observer.observe(this.nextPageLinkTarget) } }