機械翻訳について
  1. Oracle Content Managementでのサイトの構築
  2. 付録
  3. チュートリアル: Knockoutによるコンポーネントの開発
  4. ステップ10: インライン編集でのネストされたコンポーネントの使用

ステップ10: インライン編集でのネストされたコンポーネントの使用

Oracle Content Managementコンポーネントは、KnockoutJSコンポーネント・アーキテクチャを使用して実装されます。 つまり、KnockoutJSを使用してコンポーネントを実装する場合は、Oracle Content Management組込みコンポーネントをテンプレートに直接含めることができます。

ノート:

Oracle Content Management組込みコンポーネントは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>' +
paramsテンプレート・バインディングに渡されるscsComponentデータには、次のものが含まれます:

  • renderMode: これは、サイト・ビルダーが存在するモードを示します。 これを使用して、機能を有効および無効にできます。 たとえば、<scs-title>コンポーネントで使用される場合、editモードで実行すると、リッチ・テキスト・エディタが追加されます。

  • parentId: これは、Oracle Content Managementコンポーネントがネストされたコンポーネントとしてレンダリングされていることを認識するために必要です。 ネストされたコンポーネントに対するすべての変更は、カスタム・コンポーネントのデータに保存されます。

  • id: ネストされたコンポーネントの一意のID。 これは、さらに、カスタム・コンポーネントのIDによってネームスペース化されます。

  • data: ネストされたコンポーネントの初期データ。 コンポーネントは、追加変更されない場合、この初期データを使用してレンダリングします。

参照されるidおよびmodeの値は、SampleComponentViewModelオブジェクトのカスタム・コンポーネントに渡されるため、次の値を取得するためにオブジェクトを変更する必要はありません: 

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

サポートされている他のすべてのネストされたコンポーネントの構文は、<scs-paragraph>と同じパターンに従います。次に例を示します: <scs-image>, <scs-title>, <scs-button>。

ステップ10の結果の確認

  1. サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。

  2. ページを編集モードにします。

  3. コンポーネントをページにドラッグ・アンド・ドロップします。

  4. コンポーネント内のAs a page author, you can edit. . .テキストをクリックし、リッチ・テキスト・エディタを使用して摘要を更新します。

  5. プレビュー・モードに切り替えて更新を確認します。

  6. 編集モードに切り替えなおします。

  7. コンポーネントに対する「設定」パネルを開きます。

  8. ネストされたコンポーネントが見つかったため、表示された「コンポーネント」リンクをクリックします。

  9. 「段落」をクリックします。これは、見つかったネストされたコンポーネントです。

コンポーネント内の段落コンポーネントに対してプロパティを更新できるようになりました。

ノート:

コンポーネントがインスタンス化されるまで、Oracle Content Managementでは、テンプレートに存在する可能性のあるネストされたコンポーネントは認識されません。 非表示のネストされたコンポーネントについてOracle Content Managementを指示するには、SitesSDK.setProperty('visibleNestedComponents', []); APIを使用します。 非表示のネストされたコンポーネントをデフォルトで表示するには、コンポーネント登録の"nestedComponents": []配列を更新する必要があります。

「ステップ11: 様々なレイアウトのサポート」に進みます。