สร้างเลย์เอาต์ส่วนที่รองรับการโหลดเมื่อต้องการ

ลิสต์เนื้อหาสามารถเรียกเลย์เอาต์ของส่วนที่มีองค์ประกอบเพิ่มเติมเมื่อมีการสืบค้นองค์ประกอบเหล่านี้

เมื่อคุณแสดงผลลิสต์เนื้อหา คุณจะมีตัวเลือกในการเลือกเลย์เอาต์ของส่วนเพื่อแสดงผลรายการเนื้อหาทั้งหมดที่ถูกส่งกลับ ซึ่งจะช่วยให้คุณสามารถสร้างเลย์เอาต์ต่างๆ สำหรับรายการเนื้อหา เช่น ตาราง ตัวเลื่อน หรือเลย์เอาต์แปดคอลัมน์ เลย์เอาต์ของส่วนที่กำหนดเองเหล่านี้สามารถเข้าไปเป็นส่วนหนึ่งของคุณสมบัติการแบ่งหน้าขั้นสูงเพิ่มเติมได้ด้วย

ลิสต์เนื้อหารองรับการแบ่งหน้าต่อไปนี้

• การแบ่งหน้า
• โหลดเมื่อเลื่อน
• โหลดเมื่อคลิก

สำหรับการแบ่งหน้ามาตรฐาน เลย์เอาต์ของส่วนไม่ต้องดำเนินการใดๆ ระบบจะแสดงผลอีกครั้งด้วยชุดรายการถัดไปเมื่อผู้ใช้คลิกเพจถัดไป อย่างไรก็ตาม สำหรับ โหลดเมื่อเลื่อน และ โหลดเมื่อคลิก ระบบจะเพิ่มองค์ประกอบเพิ่มเติมไปยังเลย์เอาต์ของส่วน แทนที่จะแสดงผลเลย์เอาต์ของส่วนของส่วนอีกครั้ง โดยส่วนใหญ่แล้ว วิธีนี้ใช้สำหรับโมเดลการเลื่อนแบบไม่จำกัด ซึ่งคุณจะโหลดรายการ n ครั้งแรก เมื่อผู้ใช้เลื่อนเพจลง คุณจะดึงข้อมูลและแสดงผลชุดรายการถัดไป เพื่อเป็นการรองรับ โหลดเมื่อเลื่อน และ โหลดเมื่อคลิก เลย์เอาต์ของส่วนที่กำหนดเองต้องดำเนินการดังนี้

1. render.js: ใช้งาน API addComponent() ซึ่งจะถูกเรียกพร้อมองค์ประกอบใหม่แต่ละรายการที่จะเพิ่มไปยังเลย์เอาต์ของส่วน

   // dynamic API for adding additional components through "load more" when used in a Content List
              addComponent: function (parentObj, component) {     
                  // create the component div and add it to the parent object
                  $(parentObj).append(this.createComponentDiv(component)); 
              }

2. appInfo.json: รวมรายการต่อไปนี้เพื่อให้ลิสต์เนื้อหาทราบว่าเลย์เอาต์ของส่วนรองรับ addComponent() api

   "contentListData": {  
     "addComponent": true
   },

เมื่ออัปเดต appInfo.json แล้ว เมื่อผู้ใช้เลือกเลย์เอาต์ของส่วนนี้ในแผงข้อมูลการตั้งค่า และไปที่หน้าจอการแบ่งหน้า ผู้ใช้จะเห็นตัวเลือก โหลดเมื่อคลิก และ โหลดเมื่อเลื่อน