Krok 10: Používanie vnorených komponentov s úpravou v riadku

Komponenty Oracle Content Management sa implementujú s použitím architektúry komponentov KnockoutJS. To znamená, že ak na implementáciu komponentov použijete KnockoutJS, vstavané komponenty služby Oracle Content Management môžete pridať priamo do šablóny.

Poznámka:

Keďže vstavané komponenty služby Oracle Content Management sa dajú spúšťať len na stránke služby Oracle Content Management, vnorené komponenty nebudete môcť použiť, ak sa komponent vykresľuje vo vloženom ráme.

Ako využívať vnorené komponenty:

  1. Implementujte komponent s použitím knižnice KnockoutJS.

  2. Na pridanie komponentu použite RequireJS a použite tú istú premennú inštancie Knockout "ko", ktorú vytvorila služba Oracle Content Management.

    Je to potrebné preto, že Oracle Content Management rozširuje Knockout o komponenty a tieto komponenty nebudú k dispozícii, ak používate vlastnú inštanciu knižnice KnockoutJS.

V tomto kroku skontrolujete, ako sa komponenty Obrázok, Odsek a Nadpis v službe Oracle Content Management vykresľujú vo vašom vlastnom komponente. Používateľ bude môcť komponent upraviť priamo na stránke a bude mať prístup na panel Nastavenia pre vnorený komponent.

Ak chcete vidieť, ako sú tieto komponenty zahrnuté v šablóne, upravte súbor render.js a pozrite sa na objekt sampleComponentTemplate. Toto je vykreslená predvolená sekcia:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

Vnorený komponent <scs-image> je definovaný nasledujúcim záznamom:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Dáta scsComponent odovzdané do viazania šablóny params obsahujú toto:

  • renderMode: Odkazuje na režim, v ktorom sa nachádza generátor lokalít. Môže sa používať na aktiváciu a deaktiváciu funkcií. Keď túto vlastnosť používa napríklad komponent <scs-title>, pri spustení v režime edit pridá editor formátovaného textu.

  • parentId: Táto vlastnosť sa vyžaduje, aby komponent Oracle Content Management vedel, že je vykresľovaný ako vnorený komponent. Všetky zmeny vykonané vo vnorenom komponente sa uložia do dát pre vlastný komponent.

  • id: Jednoznačné ID vnoreného komponentu. Neskôr bude mať z priestoru názvov priradené ID pre vlastný komponent.

  • data: Počiatočné dáta pre vnorený komponent. Ak komponent nie je ďalej modifikovaný, bude sa vykresľovať s týmito počiatočnými dátami.

Odkazované hodnoty id a mode sa odovzdajú do vášho vlastného komponentu v objekte SampleComponentViewModel, takže objekt nebude potrebné modifikovať, aby ste dostali tieto hodnoty:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

Syntax pre všetky ostatné podporované vnorené komponenty používa rovnaký vzor ako pre <scs-paragraph>, napríklad: <scs-image>, <scs-title>, <scs-button>.

Kontrola výsledkov pre krok 10

  1. Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.

  2. Otvorte stránku v režime úprav.

  3. Myšou presuňte komponent na stránku.

  4. V komponente kliknite na text As a page author, you can edit. . . a pomocou editora formátovaného textu aktualizujte popis.

  5. Prepnite na režim ukážky a pozrite si aktualizáciu.

  6. Prepnite späť na režim úprav.

  7. Otvorte panel Nastavenia pre váš komponent.

  8. Kliknite na prepojenie Komponenty, ktoré sa teraz zobrazuje, pretože sa našiel vnorený komponent.

  9. Kliknite na položku Odsek, ktorá je nájdeným vnoreným komponentom.

Teraz môžete aktualizovať vlastnosti pre komponent Odsek vo svojom komponente.

Poznámka:

Kým nebude komponent inštancovaný, Oracle Content Management nebude vedieť o žiadnych vnorených komponentoch, ktoré by mohli v šablóne existovať. Službu Oracle Content Management môžete o skrytých vnorených komponentoch informovať pomocou rozhrania SitesSDK.setProperty('visibleNestedComponents', []); API. Ak chcete, aby sa skryté vnorené komponenty zobrazovali predvolene, je potrebné aktualizovať pole "nestedComponents": [] v registrácii komponentu.

Pokračujte na Krok 11: Podpora rôznych rozložení.