Шаг 10. Использование вложенных компонентов с внутристрочным редактированием

Компоненты Oracle Content Management внедряются с помощью архитектуры компонента KnockoutJS. Это означает, что если для внедрения компонентов используется KnockoutJS, встроенные компоненты Oracle Content Management можно включить непосредственно в шаблон.

Чтобы использовать вложенные компоненты, выполните указанные ниже действия.

1. Внедрите свой компонент с помощью KnockoutJS.

2. С помощью RequireJS включите свой компонент и используйте ту же переменную экземпляра Knockout "ko", что создана в Oracle Content Management.

   Это необходимо, поскольку 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>.