단계 10: 인라인 편집과 함께 중첩 구성요소 사용

Oracle Content Management 구성요소는 KnockoutJS 구성요소 구조를 사용하여 구현됩니다. 즉, KnockoutJS를 사용하여 구성요소를 구현하는 경우 템플리트에 직접 Oracle Content Management 내장 구성요소를 포함할 수 있습니다.

중첩 구성요소를 활용하려면 다음과 같이 하십시오.

1. KnockoutJS를 사용하여 구성요소를 구현합니다.

2. RequireJS를 사용하여 구성요소를 포함하고 Oracle Content Management에서 생성된 동일한 Knockout "ko" 인스턴스 변수를 사용합니다.

   Oracle Content Management가 구성요소로 Knockout을 확장하고 고유의 KnockoutJS 인스턴스를 사용할 경우 이 구성요소가 제공되지 않기 때문에 필요합니다.

이 단계에서는 Oracle Content Management 이미지, 단락 및 제목 구성요소가 사용자정의 구성요소에 렌더링되는 방법을 검토합니다. 사용자는 페이지 내에서 직접 편집하고 중첩 구성요소의 설정 패널에 액세스할 수 있습니다.

이 구성요소가 템플리트에 어떻게 포함되는지 보려면 render.js 파일을 편집하고 sampleComponentTemplate 객체를 살펴봅니다. 렌더링되는 기본 섹션은 다음과 같습니다.

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

<scs-image> 중첩 구성요소를 살펴보면 다음 항목이 표시됩니다.

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

참조된 id 및 mode 값은 SampleComponentViewModel 객체의 사용자정의 구성요소에 전달되므로 이 값을 가져오도록 객체를 수정할 필요가 없습니다.

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

그 밖에 모든 지원되는 중첩 구성요소의 구문은 <scs-paragraph>와 동일한 패턴을 따릅니다. 예: <scs-image>, <scs-title>, <scs-button>.