Etap 10: Używanie zagnieżdżonych składników z funkcjami edycji miejscowej

Składniki Oracle Content Management są implementowane przy użyciu architektury składników KnockoutJS. Znaczy to, że — jeśli do implementacji składników używa się biblioteki KnockoutJS — wbudowane składniki Oracle Content Management można zawrzeć bezpośrednio w szablonie.

Uwaga:

Ponieważ wbudowane składniki Oracle Content Management mogą działać tylko na stronie Oracle Content Management, nie można używać zagnieżdżonych składników, jeśli składnik jest renderowany w ramce wstawkowej.

Aby móc używać zagnieżdżonych składników, należy:

  1. Zaimplementować składnik, używając KnockoutJS.

  2. Zawrzeć składnik, używając RequireJS, i użyć tej samej zmiennej instancyjnej Knockout "ko", która została utworzona przez Oracle Content Management.

    Jest to wymagane, ponieważ Oracle Content Management rozszerza Knockout o składniki i składniki te nie będą dostępne, jeśli użytkownik będzie używał własnej instancji KnockoutJS.

W tej części zobaczymy, w jaki sposób są w składniku niestandardowym renderowane składniki "obraz" (image), "akapit" (paragraph) i "tytuł" (title) pochodzące z Oracle Content Management. Użytkownik będzie mógł edytować je bezpośrednio na stronie oraz wywoływać panel "Ustawienia" dla zagnieżdżonego składnika.

Chcąc zobaczyć, jak te składniki są zawierane w szablonie, można otworzyć plik render.js i przyjrzeć się obiektowi sampleComponentTemplate. Poniżej jest pokazana renderowana sekcja domyślna:

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

Przyglądając się zagnieżdżonemu składnikowi <scs-image>, można zobaczyć następujący wpis:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Dane scsComponent, przekazywane do wiązania params szablonu, zawierają:

  • renderMode: Tryb, w którym działa konstruktor szablonów. Za pomocą tego parametru można włączać i wyłączać funkcje. Na przykład, gdy jest używany przez składnik <scs-title>, dodaje w trybie edycji edytor tekstów sformatowanych.

  • parentId: Parametr wymagany, aby składnik Oracle Content Management wiedział, że jest renderowany jako zagnieżdżony. Wszystkie zmiany, dokonane w zagnieżdżonym składniku, będą zapisywane w danych dla składnika niestandardowego.

  • id: Unikatowy ID zagnieżdżonego składnika. Następnie będzie powiązany z przestrzenią nazw na podstawie ID składnika niestandardowego.

  • data: Początkowe dane zagnieżdżonego składnika. Jeśli składnik nie zostanie zmodyfikowany, to będzie renderowany z użyciem tych początkowych danych.

Wartości id i mode są przekazywane w obiekcie SampleComponentViewModel do składnika niestandardowego, a zatem — aby uzyskać te wartości — nie trzeba tego obiektu modyfikować:

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

Składnia wszystkich pozostałych obsługiwanych zagnieżdżonych składników (na przykład <scs-image>, <scs-title>, <scs-button>) ma ten sam wzorzec, co składnia składnika <scs-paragraph>.

Sprawdzanie wyników dla etapu 10

  1. Aby konstruktor serwisów mógł pobrać zmiany do składnika, odświeżyć stronę serwisu.

  2. Przełączyć stronę do trybu edycji.

  3. Przeciągnąć składnik na stronę.

  4. W składniku kliknąć na tekście Będąc autorem strony, można edytować..., a następnie zaktualizować opis za pomocą edytora tekstów z formatowaniem.

  5. Aby wyświetlić aktualizację, przełączyć do trybu podglądu.

  6. Przełączyć z powrotem do trybu edycji.

  7. Wyświetlić panel "Ustawienia" składnika.

  8. Kliknąć na łączu Składniki, które jest wyświetlane po wykryciu zagnieżdżonego składnika.

  9. Kliknąć na składniku akapit, będącym wykrytym składnikiem zagnieżdżonym.

Można teraz zaktualizować właściwości składnika "akapit" użytego w składniku.

Uwaga:

Dopóki nie zostanie utworzona instancja składnika, Oracle Content Management nie dowie się o zagnieżdżonych składnikach, które mogą istnieć w szablonie. Chcąc poinformować Oracle Content Management o ukrytych zagnieżdżonych składnikach, można użyć SitesSDK.setProperty('visibleNestedComponents', []); API. Aby ukryte zagnieżdżone składniki domyślnie były ujawniane, trzeba w rejestracji składnika zaktualizować tablicę "nestedComponents": [].

Kontynuacja: Etap 11: Obsługa różnych układów.