Na konci tejto sekcie budete môcť zadať hodnotu pre novú vlastnosť na paneli Nastavenia a pozrieť si, ako táto nová hodnota zmenila vlastný komponent. Na stránku sa budú automaticky ukladať aj aktualizácie vlastnosti.
render.js
je potrebné aktualizovať objekty JavaScript v komponente:
SampleComponentViewModel
sampleComponentTemplate
Upravte súbor render.js
a aktualizujte komponent SampleComponentViewModel
tak, aby zahŕňal novú vlastnosť. Zmeňte túto vlastnosť:
self.showStoryLayout = ko.observable();
Namiesto nej použite:
self.showStoryLayout = ko.observable(); self.imageBannerText = ko.observable();
Aktualizujte objekt SampleComponentViewModel
, aby sa prejavili zmeny hodnôt. Zmeňte túto vlastnosť:
self.imageWidth(customData && customData.width);
Namiesto nej použite:
self.imageWidth(customData && customData.width); self.imageBannerText(customData && customData.imageBannerText);
Zmeňte objekt sampleComponentTemplate
tak, aby zobrazoval novú vlastnosť. Zmeňte túto vlastnosť:
'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +
Namiesto nej použite:
'<div data-bind="text: imageBannerText"></div>' +
Komponent synchronizujte alebo nahrajte na server Oracle Content Management.
Komponent je teraz upravený tak, aby zobrazoval novú vlastnosť. Na rozdiel od panela Nastavenia, ktorý je na stránke vložený v ráme, komponent je vložený priamo na stránke. Oblasť komponentu sa preto bude automaticky zväčšovať úmerne tomu, ako sa bude zväčšovať komponent.
Kontrola výsledkov pre krok 4
Ako zobraziť novú vlastnosť:
Obnovte stránku na vašej lokalite, aby generátor lokalít mohol načítať zmeny v komponente.
Otvorte stránku v režime úprav.
Myšou presuňte komponent na stránku.
Otvorte panel Nastavenia pre váš komponent.
Kliknite na tlačidlo Vlastné nastavenia.
Položku Image Banner
zmeňte na Workspace
.
Zmenu komponentu na stránke na Workspace
uvidíte nad obrázkom.
Pokračujte na Krok 5: Registrácia spúšťačov.