Есть ли способ в AEM использовать данные Dynami c в `cq: htmlTag` или аналогичные? - PullRequest
Новая
       33

Есть ли способ в AEM использовать данные Dynami c в `cq: htmlTag` или аналогичные?

1 голос
/ 10 февраля 2020

Чтобы избежать посторонних вложенных HTML элементов в DOM, мы пытаемся присоединить некоторые данные к внедренным <div> добавкам AEM (например, имена классов, уникальный UUID и т. Д. c.). Для этого вопроса рассматриваемый компонент будет Container. Это супертип к Adobe's core/wcm/components/container/v1/container. В container.html мы дополнительно настраиваем его, используя нашу собственную Java модель: 

column.html
<sly
  data-sly-use.template="core/wcm/components/commons/v1/templates.html"
  data-sly-use.column="com.app.components.core.models.Column"
  data-sly-use.viewModel="${'authoring/column.js' @ dataModel=column, properties=properties}"
>

Некоторые данные, используемые в нашем компоненте, - это stati c и некоторые динамические c. В этом случае component-name всегда одинаков; однако у нас также есть динамический c фрагмент данных, такой как component-id (который в нашем случае является случайным UUID, сгенерированным в реализации Java) или, возможно, в будущем, другие фрагменты данных, такие как class.

Из того, что я вижу, мы ограничены объявлением динамических c данных в column.html, а не в cq:htmlTag. Например, мы добавляем наши динамические данные c здесь в этот файл: 

column.html
<sly
  data-sly-use.template="core/wcm/components/commons/v1/templates.html"
  data-sly-use.column="com.app.components.core.models.Column"
  data-sly-use.viewModel="${'authoring/column.js' @ dataModel=column, properties=properties}"
>
  <!-- Dynamic Data comes from our Java implementation, such as `container.containerUUID` -->
  <meta
    data-sf-component-id="${container.containerUUID}"
    data-sf-version="${container.version}"
  />
</sly>

Любые данные "stati c" могут быть безопасно помещены в cq: htmlTag, и они будут отображаться на <div> который добавляется в DOM, например: 

_cq_htmlTag/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
  xmlns:jcr="http://www.jcp.org/jcr/1.0" 
  xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
  jcr:primaryType="nt:unstructured" 
  <!-- Static Data can be placed here. -->
  class="namespace-column-v1" 
  data-sf-component="Column" />

Однако данные Dynami c, такие как идентификатор, должны быть вложены, как показано выше в column.html, что в нашем случае не идеально , Вот пример того, как это выглядит визуализированным: 

Rendered HTML
<!-- Static data is in parent div -->
<div
  class="namespace-column-v1 aem-GridColumn--default--none aem-GridColumn aem-GridColumn-- 
         offset--default--0 aem-GridColumn--default--1"
  data-sf-component="Column"
>
  <!-- Dynamic data must be nested, and not on the parent div. -->
  <meta data-sf-component-id="4b9eeb328439eded3045fe4cb8d8d24d" data-sf-version="v1">
  ...
</div>

Возможно ли, используя cq:htmlTag или каким-либо другим методом, обеспечить, чтобы верхний родительский элемент нашего компонента также содержал данные Dynami c мы желаем? В идеале это решение O (1) и не требует Javascript селекторов или дополнительных библиотек, которые нам нужно загрузить, просто чтобы добавить класс к <div>.

Кажется, что cq:noDecoration может это вариант, но это, кажется, усложняет ситуацию, так как я слышал, что это нарушает возможность редактирования компонента во время его авторизации.

Спасибо за любую помощь!

...