AEM用于获取子节点的属性。

时间:2015-10-08 02:16:15

标签: javascript cq5 aem sightly

所以它看起来很适合获取属性,但我想工作获取我定义的其他子节点的属性。

这是我的PictureFill组件结构的开始:

{
  jcr:primaryType: "nt:unstructured",
  jcr:createdBy: "admin",
  fileReference: "/content/dam/myapp/dev/hero-billboard.jpg",
  jcr:lastModifiedBy: "admin",
  jcr:created: "Wed Oct 07 2015 03:38:00 GMT+0000",
  jcr:lastModified: "Wed Oct 07 2015 16:54:12 GMT+0000",
  sling:resourceType: "myapp/components/content/image",
  cq:responsive: {
    jcr:primaryType: "nt:unstructured"
  },
    mobile: {
      jcr:primaryType: "nt:unstructured",
      path: "/content/dam/myapp/dev-testing/placeholder/FPO-hero-sm.jpg"
    },
    tablet: {
      jcr:primaryType: "nt:unstructured"
    },
    desktop: {
      jcr:primaryType: "nt:unstructured"
    },
    extralg: {
      jcr:primaryType: "nt:unstructured"
    }
}

所以我要坚持的部分是如何在移动设备,平板电脑,桌面和extralg节点上设置属性。

我想重用从utils / Image.js获得的OOTB功能,而不是重建它,以便为什么我已经走了Java路线。

2 个答案:

答案 0 :(得分:2)

为什么不使用WCMUse Java类或JS使用?

您正在寻找的是为您想要实现的目标而定制的,因此您应该拥有自己的控制器并访问子节点的属性,Sightly是一种模板化语言,如果您是有目的的,那么它很简单需要特定的东西创建一个使用Java或JavaScript对象并使用Sightly访问它。

答案 1 :(得分:0)

方法1:HTL/Sightly

在您的question中具有数据结构:

<sly data-sly-list.device="${resource.listChildren}">
  ${device.name} // this should output 'mobile' or 'desktop', etc.
  ${device.path} // this should output the paths
</sly>

方法2:Javascript USE API

这是我要从其访问navbarnavitemitem0的节点(item1):

enter image description here

这是帮助我做到这一点的getLinks方法(每个项目都有两个属性-hreflinkText

enter image description here

祝你好运...