ขั้นตอนที่ 4: แสดงคุณสมบัติใหม่ในองค์ประกอบ

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

แก้ไข render.js และอัปเดตองค์ประกอบ SampleComponentViewModel ให้รวมองค์ประกอบใหม่ เปลี่ยนแปลงคุณสมบัตินี้:

self.showStoryLayout = ko.observable();

ใช้ค่านี้แทน:

self.showStoryLayout = ko.observable();
self.imageBannerText = ko.observable();

อัปเดต SampleComponentViewModel เพื่อเรียกการเปลี่ยนแปลงใดๆ ในค่า เปลี่ยนแปลงคุณสมบัตินี้:

self.imageWidth(customData && customData.width);

ใช้ค่านี้แทน:

self.imageWidth(customData && customData.width);
self.imageBannerText(customData && customData.imageBannerText);

เปลี่ยนแปลง sampleComponentTemplate เพื่อแสดงคุณสมบัติใหม่ เปลี่ยนแปลงคุณสมบัตินี้:

'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +

ใช้ค่านี้แทน:

'<div data-bind="text: imageBannerText"></div>' +

ซิงโครไนซ์หรืออัปโหลดองค์ประกอบไปยังเซิร์ฟเวอร์ Oracle Content Management

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