ขั้นตอนที่ 10: ใช้องค์ประกอบที่ซ้อนกันกับการแก้ไขแบบอินไลน์

มีการนำองค์ประกอบของ Oracle Content Management ไปใช้โดยใช้สถาปัตยกรรมขององค์ประกอบ KnockoutJS ซึ่งหมายความว่าหากคุณกำลังใช้ KnockoutJS เพื่อนำองค์ประกอบของคุณไปใช้งาน คุณสามารถรวมองค์ประกอบภายในของ Oracle Content Management ไว้ในเทมเพลทของคุณได้โดยตรง

ในการนำองค์ประกอบที่ซ้อนกันไปใช้ ให้ทำดังนี้

1. ใช้งานองค์ประกอบของคุณโดยใช้ KnockoutJS

2. ใช้ RequireJS เพื่อรวมองค์ประกอบของคุณ และใช้ตัวแปรอินสแตนซ์ Knockout "ko" ที่เหมือนกัน ซึ่ง Oracle Content Management สร้างขึ้น

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

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

ในการดูวิธีการรวมองค์ประกอบเหล่านี้ในเทมเพลทของคุณ ให้แก้ไขไฟล์ render.js และดูที่ออบเจกต์ sampleComponentTemplate ส่วนดีฟอลต์ที่แสดงจะปรากฏที่นี่

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

ดูที่องค์ประกอบที่ซ้อนกัน <scs-image> คุณจะเห็นรายการต่อไปนี้

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +

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

// Store the args
self.mode = args.viewMode;
self.id = args.id;

รูปแบบคำสั่งสำหรับองค์ประกอบที่ซ้อนกันอื่นๆ ที่รองรับจะตามหลังรูปแบบที่เหมือนกันสำหรับ <scs-paragraph> ตัวอย่างเช่น: <scs-image>, <scs-title>, <scs-button>