CQ5/AEM6/Sightly - 从 Java Use-Api 返回自定义类型答案

【问题标题】：CQ5/AEM6/Sightly - Return custom type from Java Use-ApiCQ5/AEM6/Sightly - 从 Java Use-Api 返回自定义类型
【发布时间】：2015-02-06 11:55:42
【问题描述】：

使用 JavaScript Use-Api 我能够创建自定义对象并将其返回到 html 文件。此功能允许我创建自定义对象列表，可用于创建菜单或其他复杂的类似列表的组件。

假设我有以下内容结构：

/content
    /project
        /homepage
            /contentpage1
                /contentpage1.1
                /contentpage1.2
                /contentpage1.3 (hidden)
            /contentpage2
                /contentpage1.1 (hidden)
                /contentpage1.2 (hidden)
                /contentpage1.3 (hidden)
            /contentpage3
            /contentpage4

菜单应仅包含第一级内容页。每个菜单项都应该有带有二级内容页面的下拉列表，如果它们存在并且没有隐藏的话。我可以使用以下代码在 JavaScript 中做到这一点：

"use strict";

use(function() {

    function getMenuItems() {
        var currentPageDepth = currentPage.getDepth();
        var menuObjects = [];
        if(currentPageDepth >= 3) {
            var homePage = currentPage.getAbsoluteParent(2);
            var list = homePage.listChildren();
            while(list.hasNext()) {
                var tempPage = list.next()
                var customPageObject = createMenuItemObject(tempPage);
                menuObjects.push(customPageObject);
            }            
        }
        return menuObjects;
    }

    function createMenuItemObject(page) {
        // ...
        // looking for any other properties of page or its children
        // ...
        return {page: page, 
                visibleChildrenExists: visibleChildrenExists(page)};
    }

    function visibleChildrenExists(page) {
        var list = page.listChildren();
        var visibleChildrenExists = false;
        while(list.hasNext()) {
            var subPage = list.next();
            if(!subPage.isHideInNav()) {
                visibleChildrenExists = true;
                break;
            }
        }
        return visibleChildrenExists;
    }

    return {
        menuObjectsList: getMenuItems(),
    };
}

HTML：

<headerComponent data-sly-use.headerComponentJS="headerComponent.js" data-sly-unwrap />
<menuItems data-sly-list.menuItem="${headerComponentJS.menuObjectsList}"  data-sly-unwrap >
     <li class='${menuItem.visibleChildrenExists ? "" : "direct"}' data-sly-test="${!menuItem.page.hideInNav}">
        <a href="${menuItem.page.path}.html">${menuItem.page.title}</a>
        <ul data-sly-test="${menuItem.visibleChildrenExists}" data-sly-list.submenuItem="${menuItem.page.listChildren}">
            <li data-sly-test="${!submenuItem.hideInNav}">
                <a href="${submenuItem.path}.html">${submenuItem.title}</a>
            </li>
        </ul>
     </li>       
</menuItems>

为什么要使用 Java Use-Api？在 Resource 或 Node 等接口上操作更容易。看起来它在 JavaScript 中效果不佳，但我需要有可能返回具有多个属性的自定义对象。

问题是：使用 Java Use-Api 甚至可以做类似的事情吗？我必须返回什么？我无法返回地图，因为无法将参数传递给 Java Use-Api 方法，因此无法访问其元素...有什么建议吗？

【问题讨论】：

标签： aem sightly

【解决方案1】：

可以使用 java-use api 返回地图，请参阅下面的示例：

Java 类中的方法

//Return a map
public Map<String, String> getTestMap() {
    //TODO some coding
    Map<String,String> testMap = new HasMap<String,String>();
    testMap.put("IDA", "test value");
    testMap.put("IDB", "test value 2");

    return testMap;     
}

访问地图每个元素的 HTML 代码：

<div data-sly-use.param="JavaClass">    
    <div data-sly-test.map="${param.testMap}">
        <div class="pos">
            <span class="classA">${map['IDA']}</span><br>
            <span class="classB">${map['IDB']}</span>
        </div>
    </div>
</div>

【讨论】：