如何使用Adobe AEM中的列表访问嵌套子属性?

时间:2017-11-05 23:41:32

标签: adobe cq5 sightly

我正在尝试访问其中包含'title'和'url'的项目列表。我想访问'item'或'url',但不知道如何。

可以访问子项,但使用:

  • $ {child} //像这样打印{“title”:“Hello”,“url”:“www.hello.com”}

  • 但$ {child.url}或$ {child ['url'}不会打印任何内容。

这是我的HTML:

<div data-sly-use.model="au.com.nbnco.website.model.components.Links">
    <h6>${properties.linksTitle @ context="html"}</h6>
    <ul data-sly-list.child="${properties.links}">
        <li> ${child.url}</li>  // not printing anything
        <li> ${child.['url']}</li>  // not printing anything
        <li> ${child}</li> // prints like this {"title":"Hello","url":"www.hello.com"}
    </ul>
</div>

这是我的dialog.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="cq:Dialog"
          width="640"
          height="480"
          xtype="dialog">
    <items
            jcr:primaryType="cq:Widget"
            xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <configurations
                    jcr:primaryType="cq:Panel"
                    title="Configuration">
                <items jcr:primaryType="cq:WidgetCollection">
                    <links_title
                            jcr:primaryType="nt:unstructured"
                            fieldLabel="Links Title"
                            name="./linksTitle"
                            defaultValue="Links"
                            xtype="textfield"/>
                    <links
                            jcr:primaryType="cq:Widget"
                            name="./links"
                            title="Links"
                            xtype="multifield">
                        <fieldConfig
                                jcr:primaryType="cq:Widget"
                                border="true"
                                layout="form"
                                padding="5px"
                                xtype="multi-field-panel">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <title
                                        jcr:primaryType="cq:Widget"
                                        dName="title"
                                        fieldLabel="Title"
                                        xtype="textfield"/>
                                <url
                                        jcr:primaryType="cq:Widget"
                                        dName="url"
                                        fieldLabel="Url"
                                        xtype="textfield"/>
                            </items>
                        </fieldConfig>
                    </links>
                </items>
            </configurations>
        </items>
    </items>
</jcr:root>

3 个答案:

答案 0 :(得分:2)

您应该能够访问属性网址和标题,如下所示:

<ul data-sly-list.child="${properties.links}">
        <li> ${child.properties.url}</li>
        <li> ${child.properties.title}</li>
    </ul>

非常类似于您访问currentPage的其他自定义属性“链接”的方式

答案 1 :(得分:1)

看起来links属性存储为多个JSON字符串。 HTL / Sightly不会解析为JSON字符串。您将需要一个use-api对象来解析JSON并输出属性。

答案 2 :(得分:0)

HTL不会解析您的对象。您可以使用JS辅助函数来解析元素。

<sly data-sly-list.jsonLinks="${properties.links}">
<ul data-sly-use.parsedLinks="${'../parseMyJson.js' @ element=jsonLinks}">
<li>${parsedLinks.title}</li>
<li>${parsedLinks.url}</li>
</ul>
</sly>

例如,在父文件夹中,使用:

创建一个parseMyJson.js
use(function () {
    var element = this.element;
    if (element) {
        element = JSON.parse(element);
    }
    return element;
});