AEM - 在子组件的对话框中获取父组件dilalog的属性

时间:2016-06-25 08:22:20

标签: javascript html adobe cq5 aem

我对AEM和纯前端(html,css,js)都很陌生,所以对于提出这样一个基本问题表示歉意。我已经制作了两个组件父母和孩子。这些组件中的每一个都有一个我在对话框中设置的名称属性。我需要能够访问子组件中的父名称属性,我的页面看起来像这样。

父组件
--parentParsys
----儿童部件
------ childParsys

我只需要在子对话框中显示父母姓名,但我似乎无法找到父母姓名。

非常感谢任何指导。理想情况下,我想在JS中这样做,但我很乐意在JSP中选择。

由于

1 个答案:

答案 0 :(得分:2)

将监听器附加到子组件的对话框,以便在加载对话框时运行JavaScript。 JavaScript将根据子组件的路径确定父组件的路径。使用Apache Sling的RESTful特性,您只需向父组件的资源发出GET请求,该资源将返回该资源的属性。然后,您可以使用所需的值更新当前打开的对话框。您需要的所有信息都在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;
  }
}