Trinn 10: Bruke nøstede komponenter med linjebundet redigering

Oracle Content Management-komponenter implementeres ved hjelp av arkitekturen til KnockoutJS-komponenten. Det betyr at hvis du bruker KnockoutJS til å implementere komponentene, kan du inkludere de innebygde komponentene fra Oracle Content Management direkte i malen.

Merknad:

Ettersom de innebygde komponentene i Oracle Content Management bare kan kjøres på Oracle Content Management-siden, kan du ikke bruke nøstede komponenter hvis komponenten blir gjengitt i en linjebundet ramme.

Slik drar du nytte av nøstede komponenter:

  1. Implementer komponenten ved hjelp av KnockoutJS.

  2. Bruk RequireJS til å inkludere komponenten, og bruk den samme "ko"-forekomstvariabelen for Knockout som opprettes av Oracle Content Management.

    Dette er obligatorisk fordi Oracle Content Management utvider Knockout med komponenter, og disse komponentene er ikke tilgjengelige hvis du bruker din egen forekomst av KnockoutJS.

I dette trinnet går du gjennom hvordan bilde-, avsnitts- og tittelkomponentene for Oracle Content Management gjengis i den egendefinerte komponenten. En bruker kan redigere den direkte på siden og få tilgang til ruten Innstillinger for den nøstede komponenten.

Hvis du vil se hvordan disse komponentene er inkludert i malen, redigerer du filen render.js og ser på objektet sampleComponentTemplate. Standarddelen som blir gjengitt, 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 -->' +

Når den nøstede komponenten <scs-image> vises, ser du følgende oppføring:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Dataene for scsComponent som sendes til malbindingen params, omfatter følgende:

  • renderMode: Dette henviser til modusen som områdebyggeren er i. Du kan bruke denne til å aktivere og deaktivere funksjoner. Når den blir brukt av komponenten <scs-title>, legger den for eksempel til redigeringsprogrammet for rik tekst ved kjøring i modusen edit.

  • parentId: Dette er obligatorisk for at Oracle Content Management-komponenten skal vite at den blir gjengitt som en nøstet komponent. Alle endringer i den nøstede komponenten blir lagret i dataene for den egendefinerte komponenten.

  • id: En unik ID for den nøstede komponenten. ID-en for den egendefinerte komponenten blir brukt som navneområde.

  • data: Opprinnelige data for den nøstede komponenten. Hvis komponenten ikke blir endret ytterligere, blir den gjengitt med disse opprinnelige dataene.

De refererte id- og mode-verdiene blir sendt til den egendefinerte komponenten i SampleComponentViewModel-objektet, slik at du ikke trenger å endre objektet når du skal hente disse verdiene:

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

Syntaksen for alle andre støttede nøstede komponenter følger samme mønster som for <scs-paragraph>, for eksempel: <scs-image>, <scs-title>, <scs-button>.

Kontrollere resultatene for trinn 10

  1. Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.

  2. Sett siden i redigeringsmodus.

  3. Dra og slipp komponenten din på siden.

  4. Klikk på teksten As a page author, you can edit. . . i komponenten, og oppdater beskrivelsen ved hjelp av redigeringsprogrammet for rik tekst.

  5. Bytt til forhåndsvisningsmodus slik at du ser oppdateringen.

  6. Bytt tilbake til redigeringsmodus.

  7. Åpne ruten Innstillinger for komponenten.

  8. Klikk på koblingen Komponenter som nå vises, fordi den fant den nøstede komponenten.

  9. Klikk på Avsnitt, som er den nøstede komponenten den fant.

Nå kan du oppdatere egenskapene mot komponenten Avsnitt i komponenten.

Merknad:

Inntil det er opprettet forekomst av komponenten, kjenner ikke Oracle Content Management til noen nøstede komponenter som kan finnes i malen. Hvis du vil fortelle Oracle Content Management om disse skjulte nøstede komponentene, kan du bruke API-et SitesSDK.setProperty('visibleNestedComponents', []);. Hvis du vil at skjulte nøstede komponenter skal vises som standard, må du oppdatere matrisen "nestedComponents": [] i komponentregistreringen.

Gå videre til Trinn 11: Støtte for ulike oppsett.