步驟 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 伺服器。

您已更改元件以顯示新特性。因為元件不像「設定值」面板是內嵌在頁面上的內嵌框架，它是直接插入頁面中，所以隨著元件的大小增加，其可用的區域將自動增加。