步骤 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：支持不同的布局。