Trin 4: Vise den nye egenskab i komponenten

I slutningen af dette afsnit kan du indtaste en værdi for en ny egenskab i panelet Indstillinger og se ændringen af den tilpassede komponent, der afspejler den nye værdi. Opdateringer af egenskaben gemmes også automatisk for dig sammen med siden.

Rediger render.js, og opdater komponenten SampleComponentViewModel, så den inkluderer den nye egenskab. Ændr denne egenskab:

self.showStoryLayout = ko.observable();

Brug denne i stedet:

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

Opdater SampleComponentViewModel for at hente eventuelle ændringer af værdier. Ændr denne egenskab:

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

Brug denne i stedet:

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

Ændr sampleComponentTemplate, så den nye egenskab vises. Ændr denne egenskab:

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

Brug denne i stedet:

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

Synkroniser eller upload komponenten til Oracle Content Management-serveren.

Du har nu ændret komponenten, så den nye egenskab vises. I modsætning til panelet Indstillinger, der er integreret i en inline-ramme på siden, øges størrelsen af det område, der er tilgængeligt for komponenten, automatisk, fordi komponenten er indsat direkte på siden.