步骤 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 服务器。

现在已变更组件以显示新属性。与嵌入在页的内嵌框架中的“设置”面板不同，因为组件直接插入到页中，所以随着它的大小增大，它可用的区域将自动增加。