Trin 10: Bruge indlejrede komponenter med inline-redigering

Oracle Content Management-komponenter implementeres ved hjælp af komponentarkitekturen i KnockoutJS. Det betyder, at hvis du bruger KnockoutJS til at implementere dine komponenter, kan du inkludere indbyggede Oracle Content Management-komponenter direkte i din skabelon.

Bemærk:

Da indbyggede Oracle Content Management-komponenter kun kan køre på Oracle Content Management-siden, kan du ikke bruge indlejrede komponenter, hvis komponenten gengives i en inline-ramme.

Sådan bruger du indlejrede komponenter:

Implementer komponenten ved hjælp af KnockoutJS.
Brug RequireJS til at inkludere komponenten, og brug den samme Knockout-instansvariabel, "ko", som oprettes af Oracle Content Management.

Dette er påkrævet, fordi Oracle Content Management udvider Knockout med komponenter, og disse komponenter er ikke tilgængelige, hvis du bruger din egen instans af KnockoutJS.

I dette trin gennemgås det, hvordan Oracle Content Management-komponenterne Billede, Afsnit og Titel gengives i den tilpassede komponent. En bruger kan redigere den direkte på siden og har adgang til panelet Indstillinger for den indlejrede komponent.

Hvis du vil se, hvordan disse komponenter er inkluderet i din skabelon, skal du redigere filen render.js og se på objektet sampleComponentTemplate. Det standardafsnit, der gengives, vises her:

'<!-- 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 -->' +

Hvis du kigger på den indlejrede komponent <scs-image>, kan du se følgende post:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +

De scsComponent-data, der videregives til params-skabelontilknytningen, inkluderer følgende:

renderMode: Denne refererer til den tilstand, som Site Builder er i. Du kan bruge den til at aktivere og deaktivere funktioner. Når den for eksempel bruges af komponenten <scs-title>, tilføjer den RTF-editoren, når den kører i tilstanden edit.
parentId: Denne er påkrævet, så Oracle Content Management-komponenten ved, at den gengives som en indlejret komponent. Alle ændringer af den indlejrede komponent gemmes i dataene for den tilpassede komponent.
id: Et entydigt ID for den indlejrede komponent. Dette placeres derudover i et navneområde af ID'et for den tilpassede komponent.
data: Startdata for den indlejrede komponent. Hvis komponenten ikke modificeres yderligere, gengives den med disse startdata.

Værdierne id og mode, der refereres til, videregives til den tilpassede komponent i objektet SampleComponentViewModel, så du ikke behøver at modificere objektet for at hente disse værdier:

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

Syntaksen for alle de andre indlejrede komponenter følger det samme mønster som <scs-paragraph>, for eksempel: <scs-image>, <scs-title> og <scs-button>.

Kontroller resultaterne for trin 10

Opfrisk din side på sitet, så Site Builder kan hente ændringer af komponenten.
Skift til redigeringstilstand for siden.
Træk komponenten til siden, og slip den.
Klik på teksten As a page author, you can edit. . . i komponenten, og opdater beskrivelsen ved hjælp af RTF-editoren.
Skift til eksempeltilstand for at se din opdatering.
Skift tilbage til redigeringstilstand.
Åbn panelet Indstillinger for komponenten.
Klik på linket Komponenter, der nu vises, fordi det fandt den indlejrede komponent.
Klik på Afsnit, som er den indlejrede komponent, det fandt.

Du kan nu opdatere egenskaberne mod komponenten Afsnit i komponenten.

Bemærk:

Oracle Content Management ved ikke, at der eventuelt er indlejrede komponenter i skabelonen, før komponenten er instantieret. Du kan fortælle Oracle Content Management om skjulte indlejrede komponenter ved hjælp af API'en SitesSDK.setProperty('visibleNestedComponents', []);. Hvis indlejrede komponenter vises som standard, skal du opdatere arrayet "nestedComponents": [] i komponentregistreringen.

Fortsæt til Trin 11: Understøtte forskellige layouts.