使用 sling:resourceType 的 AEM 对话框在同一组件对话框中包含两次答案

【问题标题】：AEM dialog using sling:resourceType include on the same component dialog twice使用 sling:resourceType 的 AEM 对话框在同一组件对话框中包含两次
【发布时间】：2021-07-20 18:28:13
【问题描述】：

要求是，在一个新的组件对话框中，我需要标签包含两个通用 CTA 配置，例如：

目前，我的新组件对话框设置如下：

<tab3
          jcr:description="Primary CTA items"
          jcr:primaryType="nt:unstructured"
          jcr:title="Primary CTA"
          granite:class="tab-wrapper"
          sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
          <columns
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
              margin="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
              <column
                  jcr:primaryType="nt:unstructured"
                  sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                  <cta
                      jcr:primaryType="nt:unstructured"
                      sling:resourceType="granite/ui/components/coral/foundation/include"
                      path="myproject/folder/components/commons/cta/content/items/columns/items/column"/>
                </items>
              </column>
            </items>
          </columns>
        </items>
      </tab3>
      <tab4
          jcr:description="Secondary CTA items"
          jcr:primaryType="nt:unstructured"
          jcr:title="Secondary CTA"
          granite:class="tab-wrapper"
          sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
          <columns
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
              margin="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
              <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                  <cta2
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/include"
                    name="./cta2/"
                    path="myproject/folder/components/commons/cta/content/items/columns/items/column"/>
                </items>
              </column>
            </items>
          </columns>
        </items>
      </tab4>

如你所见，我使用的是sling:resourceType="granite/ui/components/coral/foundation/container"

指向通用 cta 对话框配置 path="myproject/folder/components/commons/cta/content/items/columns/items/column"

问题是，在我构建它之后，在 crx/de 中，我只能看到一个节点对象：

我的通用 cta 对话框配置如下所示：

如您所见，如果我使用 sling 资源包含包含 CTA diagloc，它总是给我对象名称 CTA，并且它是重复的，因此新组件中的选项卡 3 和选项卡 4 对话框配置会覆盖彼此的值.

我想知道以前有人遇到过这个问题吗？什么是最好的解决方案？一些编码示例会有所帮助谢谢

【问题讨论】：

标签： dialog aem sling crx sling-models

【解决方案1】：

在提交之前重命名变量并将数据保存在单独的选项卡节点下：

// add .tab-class and tab-name in dialog so they are available as html atribute on dialog render

$(document).on("click", ".cq-dialog-submit", function (e) {
  var $tabs = $(".tab-class");

  $tabs.each(function (i) {
    var _this = $(this);
    var tabName = _this.data("tabe-name");

    _this.find("input").each(function () {
      $input = $(this);
      var existingName = $input.attr("name");
      var newName = tabName + '/' + existingName;
      $input.attr("name", newName);
    });
  });
});

同样在对话框加载调用 .json 并将 json 中的数据正确填充到字段中，由于名称不匹配，现有数据将不再正确填充

【讨论】：