ステップ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>です。