Dynamisk mappning av modell till komponent för SPA
- Ämnen:
- Developing
Skapat för:
- Developer
I det här dokumentet beskrivs hur den dynamiska mappningen av modell till komponent sker i Javascript SPA SDK för AEM.
ComponentMapping-modul
The ComponentMapping
-modulen tillhandahålls som ett NPM-paket till frontendprojektet. Det lagrar komponenter för användargränssnitt och tillhandahåller ett sätt för Single Page Application att mappa komponenter för användargränssnitt till AEM resurstyper. Detta aktiverar en dynamisk upplösning för komponenter när JSON-modellen för programmet analyseras.
Varje objekt i modellen innehåller en :type
fält som visar en AEM resurstyp. När den är monterad kan den främre komponenten återge sig själv med det fragment av modellen som den har fått från de underliggande biblioteken.
Se SPA Blueprint -dokument om du vill ha mer information om modellparsning och frontdelens åtkomst till modellen.
Se även npm-paketet: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping
Modellstyrt Single Page-program
Single Page-program som använder Javascript SPA SDK för AEM är modelldrivna:
-
Front-end-komponenter registrerar sig för Komponentmappningsarkiv.
-
Sedan Behållare, efter att ha fått en modell av Modellprovider, itererar över sitt modellinnehåll (
:items
). -
För en sida, dess underordnade sidor (
:children
) hämta först en komponentklass från Komponentmappning och sedan instansiera den.
Programinitiering
Varje komponent utökas med funktionerna i ModelProvider
. Initieringen har därför följande allmänna form:
-
Varje modellprovider initierar sig själv och lyssnar efter ändringar som gjorts i den del av modellen som motsvarar dess inre komponent.
-
The
PageModelManager
måste initieras så som representeras av initieringsflöde. -
När sidmodellhanteraren har lagrats returnerar den hela appmodellen.
-
Den här modellen skickas sedan till frontendroten Behållare -komponenten i programmet.
-
Delar av modellen sprids slutligen till varje enskild underordnad komponent.
Experience Manager
- Utveckla användarhandboken - översikt
- Introduktion för utvecklare
- Komma igång med utveckling i AEM Sites – WKND-självstudiekurs
- AEM kärnbegrepp
- Struktur för det AEM användargränssnittet med pekskärm
- Koncepten i det AEM användargränssnittet med pekskärm
- AEM - riktlinjer och bästa praxis
- Använda bibliotek på klientsidan
- Developing and Page Diff
- Begränsningar för redigerare
- CSRF Protection Framework
- Datamodellering - David Nueschelers modell
- Bidrar till AEM
- Dokumentskydd
- Referensmaterial
- Skapa en webbplats med alla funktioner (Classic UI)
- Designer och Designer (Classic UI)
- Plattform
- Fusklapp för Sling
- Använda Sling-adaptrar
- Taggbibliotek
- Mallar
- Använda Sling Resource Merger i AEM
- Övertäckningar
- Namnkonventioner
- Skapa en ny GRE-fältkomponent
- Query Builder
- Taggar
- Anpassa sidor som visas av felhanteraren
- Anpassade nodtyper
- Lägga till teckensnitt för grafikåtergivning
- Ansluta till SQL-databaser
- Extern URL
- Skapa och använda jobb för avlastning
- Konfigurerar cookie-användning
- Så här programmässigt kommer du åt AEM JCR
- Integrera tjänster med JMX-konsolen
- Developing the Bulk Editor
- Utveckla rapporter
- eCommerce
- Komponenter
- Kärnkomponenter
- Formatsystem
- Komponenter - översikt
- AEM - Grunderna
- Utveckla AEM
- Utveckla AEM - kodexempel
- JSON-exporterare för innehållstjänster
- Aktivera JSON-export för en komponent
- Bildredigeraren
- Dekoration-tagg
- Använda Dölj villkor
- Konfigurera flera redigerare på plats
- Utvecklarläge
- Testa användargränssnittet
- Komponenter för innehållsfragment
- Hämta sidinformation i JSON-format
- Internationalisering
- Klassiska gränssnittskomponenter
- Headless Experience Management
- Headless och Hybrid with AEM
- Aktivera JSON-export för en komponent
- Enkelsidiga program
- SPA introduktion och genomgång
- SPA WKND - självstudiekurs
- Getting Started with SPA in AEM - React
- Komma igång med SPA i AEM - Angular
- Implementera en React Component for SPA
- SPA djupdykning
- SPA
- Utveckla SPA för AEM
- SPA Blueprint
- SPA
- Dynamisk mappning av modell till komponent för SPA
- SPA
- SPA och Adobe Experience Platform Launch Integration
- SPA- och serveråtergivning
- SPA referensmaterial
- HTTP-API
- Innehållsfragment
- Experience Fragments
- Utvecklingsverktyg
- Utvecklingsverktyg
- AEM Modernization Tools
- Dialogruteredigeraren
- Verktyget Dialogkonvertering
- Utveckla med CRXDE Lite
- Hantera paket med Maven
- Utveckla AEM projekt med Eclipse
- Skapa AEM projekt med Apache Maven
- Utveckla AEM projekt med IntelliJ IDEA
- Så här använder du VLT-verktyget
- Så här använder du proxyserververktyget
- AEM Brackets Extension
- AEM Developer Tools for Eclipse
- AEM
- Personanpassning
- Utöka AEM
- Anpassa sidredigering
- Anpassa konsolerna
- Anpassa vyer av Sidegenskaper
- Konfigurera din sida för gruppredigering av sidegenskaper
- Anpassa och utöka Content Fragments
- Utöka arbetsflöden
- Utöka Multi Site Manager
- Spårning och analys
- Cloud Services
- Skapa anpassade tillägg
- Forms
- Integrera tjänster med JMX-konsolen
- Developing the Bulk Editor
- Utöka Classic UI
- Testning
- Bästa praxis
- Mobil webb