Etap 4: Wyświetlanie nowej właściwości w składniku

Pod koniec tego etapu będziemy potrafili wprowadzić wartość nowej właściwości w panelu "Ustawienia" oraz zobaczyć zmianę w składniku niestandardowym, odzwierciedlającą tę nową właściwość. Aktualizacje nowej właściwości będą automatycznie zapisywane wraz ze stroną.

Otworzyć do edycji plik render.js i zaktualizować SampleComponentViewModel, tak aby zawierał nową właściwość. Zmienić tę właściwość:

self.showStoryLayout = ko.observable();

Zamiast niej użyć:

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

Zaktualizować SampleComponentViewModel, tak aby uzyskiwać wszelkie zmiany wartości. Zmienić tę właściwość:

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

Zamiast niej użyć:

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

Zmienić sampleComponentTemplate, tak aby nowa właściwość była wyświetlana. Zmienić tę właściwość:

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

Zamiast niej użyć:

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

Zsynchronizować składnik z serwerem Oracle Content Management lub wysłać składnik na ten serwer.

Składnik został zmodyfikowany, tak aby wyświetlał nową właściwość. Składnik — w przeciwieństwie do panelu "Ustawienia", który jest osadzony w ramce wstawkowej na stronie — jest wstawiany bezpośrednio na stronie i dlatego, gdy jego rozmiar się zwiększa, automatycznie zwiększa się także dostępny dla niego obszar.