Vaihe 4: uuden ominaisuuden näyttö komponentissa

Tämän osion läpikäytyäsi osaat syöttää arvon uudelle ominaisuudelle Asetukset-paneelissa ja tarkastella, miten mukautetun komponentin muutokset vaikuttavat uuteen arvoon. Sivun tallennuksen yhteydessä myös ominaisuuteen tehdyt päivitykset tallennetaan automaattisesti.

Muokkaa render.js-tiedostoa ja päivitä SampleComponentViewModel-komponentti, jotta uusi ominaisuus voidaan ottaa mukaan. Muuta tätä ominaisuutta:

self.showStoryLayout = ko.observable();

Käytä sen sijaan tätä:

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

Päivitä SampleComponentViewModel, jotta saat arvojen muutokset näkyviin. Muuta tätä ominaisuutta:

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

Käytä sen sijaan tätä:

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

Muuta sampleComponentTemplate, jotta uusi ominaisuus voidaan näyttää. Muuta tätä ominaisuutta:

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

Käytä sen sijaan tätä:

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

Synkronoi tai lataa komponentti Oracle Content Management -palvelimeen.

Nyt olet muuttanut komponenttia uuden ominaisuuden näyttämiseksi. Toisin kuin Asetukset-paneeli, joka on upotettu sivun sisäiseen kehykseen, komponentti lisätään suoraan sivuun. Siitä johtuen komponentin koon kasvaessa myös sen käytettävissä oleva alue suurenee automaattisesti.