V tomto kroku skontrolujeme štruktúru nastavení zadaných pre lokálny komponent.
Podobne ako súbor render.js
v adresári /assets
je v rovnakom adresári aj vopred vytvorený súbor settings.html
. Súbor settings.html
vykreslí pre komponent všetky dáta vlastných nastavení. V predvolenej implementácii obsahujú dáta vlastných nastavení iba jednu vlastnosť imageWidth
.
Ako skontrolovať štruktúru lokálneho komponentu:
Pomocou klienta služby Oracle Content Management pre synchronizáciu s počítačom vyhľadajte komponent a synchronizujte ho so systémom súborov.
Ak nemáte klienta pre synchronizáciu s počítačom, komponent môžete vybrať na karte Komponenty vo webovom rozhraní služby Oracle Content Management a prejsť na nižšiu úroveň na zobrazenie súborov.
V zozname súborov pod komponentom uvidíte tieto súbory:
assets render.js settings.html appinfo.json _folder_icon.jpg
Otvorte súbor settings.html
v adresári /assets
a skontrolujte jeho obsah. Na rozdiel od súboru render.js
používa súbor settings.html
vložený rám na paneli Nastavenia v generátore lokalít. Z tohto dôvodu potrebuje aj prístup k podporným súborom, aby sa vo vloženom ráme správne vykreslil. Generátor lokalít je potrebný na spravovanie lokality, aby bolo možné izolovať z generátora lokalít všetky chyby kódu JavaScript. To je dôvod, prečo súborsettings.html
používa vložený rám.
Toto sú hlavné oblasti súboru settings.html
:
Šablóna Knockout na vykreslenie panela Nastavenia.
<!-- ko if: initialized() --> <div class="scs-component-settings"> <div> <!-- Width --> <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> </div> </div> <div data-bind="setSettingsHeight: true"></div> <!-- /ko -->
Obslužný program vlastného viazania na úpravu výšky vloženého rámu po vykreslení panela Nastavenia.
ko.bindingHandlers.scsCompComponentImpl
Funkcia Knockout ViewModel, ktorá sa použije v šablóne Knockout.
SettingsViewModel
Toto sú hlavné prvky funkcie SettingsViewModel
:
Odbery životného cyklu komponentu.
Inicializácia komponentu:
Zabezpečte, aby sa komponent nevykreslil, kým sa nevyvolajú všetky dáta. Toto je spracované použitím pozorovaných objektov Knockout observables.
self.initialized = ko.observable(false);
Zabezpečte, aby nedošlo k pokusu o aktualizáciu dát, kým nie je všetko pripravené.
self.saveData = false;
Získajte počiatočné hodnoty pre všetky požadované vlastnosti. Toto je spracované spätnými volaniami na vyvolanie dát.
SitesSDK.getProperty('customSettingsData', function (data) { //update observable self.width(data.width); // note that viewModel is initialized and can start saving data self.initialized(true); self.saveData = true; });
Uložte všetky zmeny vlastností vykonané v dátach vlastných nastavení.
self.save = ko.computed(function () { var saveconfig = { 'width': isNaN(self.width()) ? self.width() : self.width() + 'px' }; // save data in page if (self.saveData) { SitesSDK.setProperty('customSettingsData', saveconfig); } }, self);
Ak chcete pridať ďalšiu vlastnosť, ktorú chcete zaznamenať, je potrebné vykonať niekoľko krokov:
Aktualizujte používateľské rozhranie, aby zobrazovalo novú hodnotu.
Inicializujte zmenu aktuálnej hodnoty uloženej pre komponent.
Všetky zmeny hodnoty uložte späť do komponentu.
Ak chcete do vlastného komponentu pridať ďalšiu vlastnosť, vykonajte nasledujúce zmeny v súbore settings.html
:
Pridajte ďalší pozorovaný objekt observable na spracovanie novej vlastnosti. Zmeňte tento kód:
self.width = ko.observable();
Namiesto toho použite kód:
self.width = ko.observable(); self.imageBannerText = ko.observable();
Pri prvom zobrazení panela nastavení načítajte pre novú vlastnosť ľubovoľnú aktuálnu hodnotu. Zmeňte tento kód:
self.width(data.width);
Namiesto toho použite kód:
self.width(data.width); self.imageBannerText(data.imageBannerText);
Uložte všetky zmeny vykonané v novej vlastnosti. Zmeňte tento kód:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
Namiesto toho použite kód:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px', 'imageBannerText': self.imageBannerText()
Pridajte používateľské rozhranie na zobrazenie nového poľa. Zmeňte tento kód:
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
Namiesto toho použite kód:
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label> <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">
Synchronizujte alebo nahrajte súbor settings.html
.
Keby ste ho spustili teraz, zobrazilo by sa pole. Veľkosť panela Nastavenia sa však nezmení automaticky. Keďže ste zväčšili veľkosť panela, novú veľkosť je potrebné nastaviť aj pre registračnú položku súboru components.json
.
Stiahnite súbor appinfo.json
, ktorý je na rovnakej úrovni ako adresár komponentu assets/
, a aktualizujte veľkosť panela nastavení. Zmeňte tento kód:
"settingsHeight": 90,
Namiesto toho použite kód:
"settingsHeight": 160,
Synchronizujte alebo nahrajte súbor appinfo.json
.
Kontrola výsledkov pre krok 3
Teraz by ste mali mať možnosť vidieť a zadať novú vlastnosť, ktorú ste pridali na panel Nastavenia.
Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.
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.
Pre každú z vlastností, ktoré máte v súbore settings.html
, uvidíte zobrazené dve polia.
Pokračujte na Krok 4: Zobrazenie novej vlastnosti v komponente.