Trinn 4: Vise den nye egenskapen i komponenten

Når du har gjennomgått denne delen, er du i stand til å angi en verdi for en ny egenskap i ruten Innstillinger og se at den egendefinerte komponenten blir endret slik at den gjenspeiler den nye verdien. Oppdateringer av egenskapen blir også lagret automatisk for deg sammen med siden.

Rediger render.js og oppdater komponenten SampleComponentViewModel slik at den omfatter den nye egenskapen. Slik endrer du denne egenskapen:

self.showStoryLayout = ko.observable();

Bruk denne i stedet:

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

Oppdater SampleComponentViewModel slik at du får en hvilken som helst endring i verdier. Slik endrer du denne egenskapen:

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

Bruk denne i stedet:

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

Endre sampleComponentTemplate slik at du viser den nye egenskapen. Slik endrer du denne egenskapen:

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

Bruk denne i stedet:

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

Synkroniser eller last opp komponenten til Oracle Content Management-tjeneren.

Nå har du endret komponenten slik at den viser den nye egenskapen. Siden komponenten er satt direkte inn på siden, kommer det tilgjengelige området til å øke automatisk når komponenten øker i størrelse, i motsetning til ruten Innstillinger, som er innebygd i en linjebundet ramme på siden.