AEM - 在 child 组件对话框中获取 属性 的 parent 组件对话框

Question

我对 AEM 和纯前端 (html,css,js) 还很陌生，很抱歉提出这样一个基本问题。我制作了 2 个组件 parent 和 child。这些组件中的每一个都有一个我在对话框中设置的名称 属性。我需要能够在 child 组件中访问 parent 的名称 属性 我的页面如下所示。

Parent 组件
--parentParsys
----Child 组件
------childParsys

我只需要在 child 对话框中显示 parent 的名字，但我似乎找不到 parent 的名字。

任何指导将不胜感激。理想情况下，我想在 JS 中执行此操作，但我很乐意选择 JSP.

谢谢

Answer 1

将侦听器附加到您的子组件的对话框，以便在对话框加载时 运行 您的 JavaScript。即JavaScript会根据子组件的路径来确定父组件的路径。使用 Apache Sling 的 RESTful 特性，您只需向父组件的资源发出 GET 请求，这将 return 您获取该资源的属性。然后，您可以使用所需的值更新当前打开的对话框。 CQ Widgets API documentation.

中提供了您需要的所有信息

将侦听器附加到指向外部 JavaScript 文件的子对话框：

<instructions
    jcr:primaryType="cq:Widget"
    fieldLabel="Instructions"
    xtype="displayfield">
    <listeners
        jcr:primaryType="nt:unstructured"
        loadcontent="function(field, record, path){ mynamespace.updateWithParentName(field, record, path) }"
    />
</instructions>

将自定义 JavaScript 添加到创作模式下可用的 ClientLib。那可能是 cq.authoring.editor，参见 Using Client-Side Libraries。每次打开对话框时都会 运行。此示例发出同步 GET 请求并更新 displayfield。您将根据对数据的处理方式、查找父组件的方式以及添加空值检查来更新它。

var mynamespace = {};

mynamespace.updateWithParentName = function(field, record, path) {
  var parentPath = getParentPath(path);
  var parentComponent = CQ.shared.HTTP.eval(CQ.shared.HTTP.noCaching(parentPath + '.json'));
  var parentName = parentComponent.name; // assuming the property name is "name"

  field.setValue('Parent component name is: ' + parentName);

  /* Go up two levels accounting for the current component and the parsys */
  function getParentPath(path) {
    var parts = path.split('/');
    var parentPath = parts.slice(0, parts.length - 2).join('/');

    return parentPath;
  }
}