Krok 4: Zobrazení nové vlastnosti v komponentě

Na konci této části již dokážete zadat hodnotu nové vlastnosti na panelu Nastavení a zobrazit změnu vlastní komponenty tak, aby odrážela novou hodnotu. Aktualizace vlastnosti se také automaticky uloží společně se stránkou.

Upravte soubor render.js a aktualizujte komponentu SampleComponentViewModel tak, aby zahrnovala novou vlastnost. Změňte tuto vlastnost:

self.showStoryLayout = ko.observable();

Místo ní použijte následující vlastnost:

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

Aktualizujte komponentu SampleComponentViewModel tak, abyste dosáhli jakékoli změny hodnot. Změňte tuto vlastnost:

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

Místo ní použijte následující vlastnost:

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

Změňte komponentu sampleComponentTemplate tak, aby zobrazovala novou vlastnost. Změňte tuto vlastnost:

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

Místo ní použijte následující vlastnost:

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

Synchronizujte nebo odešlete komponentu na server služby Oracle Content Management.

Nyní jste změnili komponentu tak, aby zobrazovala novou vlastnost. Na rozdíl od panelu Nastavení, který je umístěn do vloženého rámce na stránce, je komponenta vložena přímo na stránku, takže pokud se zvětší, automaticky se zvětší i oblast, která je pro ni dostupná.