在本节的末尾,您将能够在“设置”面板中为新属性输入值,并看到可反映新值的定制组件更改。对该属性的更新也会随页自动保存。
render.js
文件中,必须更新组件中的两个 JavaScript 对象:
SampleComponentViewModel
sampleComponentTemplate
编辑 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 服务器。
现在已变更组件以显示新属性。与嵌入在页的内嵌框架中的“设置”面板不同,因为组件直接插入到页中,所以随着它的大小增大,它可用的区域将自动增加。
检查步骤 4 的结果
要查看显示的新属性,请执行以下操作:
刷新站点中的页,以便站点构建器能够获取对组件的更改。
让页进入编辑模式。
将组件拖放到页上。
针对组件打开“设置”面板。
单击定制设置按钮。
将 Image Banner
更改为 Workspace
。
您将在页上看到组件更新,Worksapce
显示在图像上方。
继续执行步骤 5:注册触发器。