Adım 4: Bileşende Yeni Niteliği Görüntüleme

Bu bölümün sonunda, Ayarlar panelinde yeni bir nitelik için değer girebilecek ve özel bileşenin yeni değeri yansıtacak şekilde değiştiğini göreceksiniz. Nitelikte yapılan güncellemeler de sayfayla birlikte sizin için otomatik olarak kaydedilir.

render.js dosyasını düzenleyin ve SampleComponentViewModel bileşenini yeni niteliği içerecek şekilde güncelleyin. Şu niteliği değiştirin:

self.showStoryLayout = ko.observable();

Onun yerine şunu kullanın:

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

Değerlerdeki değişiklikleri almak için SampleComponentViewModel öğesini güncelleyin. Şu niteliği değiştirin:

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

Onun yerine şunu kullanın:

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

sampleComponentTemplate öğesini yeni niteliği görüntüleyecek şekilde değiştirin. Şu niteliği değiştirin:

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

Onun yerine şunu kullanın:

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

Bileşeni, Oracle Content Management sunucusuna eşzamanlı kılın veya yükleyin.

Bileşeni yeni niteliği görüntüleyecek şekilde değiştirdiniz. Sayfadaki bir satır içi çerçeveye gömülen Ayarlar panelinin aksine, bileşen doğrudan sayfaya eklendiğinden bileşen büyüdükçe kullanabileceği alan da otomatik olarak artar.