Шаг 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.

Теперь компонент изменен для отображения нового свойства. В отличие от панели "Настройки", вложенной во встроенную рамку на странице, поскольку компонент вставляется непосредственно в страницу. С увеличением размера автоматически увеличивается доступная нему область.