Question

背景

我正在尝试在AEM中制作动态导航组件。目前我一直试图在文档和网上找到信息来帮助我但却找不到多少。

我的应用程序将vue组件加载到AEM中，因此前端由VUE控制，数据通过props传入。

我想将这些页面的页面和子页面传递到vue组件中，因此我可以使用下拉导航为任何链接创建动态导航。

示例

目前我找到了一种使用java类加载根页面链接的方法。我是这样做的，

package services.agro.something.core.models;

import java.util.*;
import java.util.Iterator;
import com.day.cq.wcm.api.Page;
import com.day.cq.wcm.api.PageFilter;

import com.adobe.cq.sightly.WCMUsePojo;

public class SidebarNavigationModel extends WCMUsePojo{
    private List<Page> items = new ArrayList<Page>();
    private Page rootPage;

    // Initializes the navigation
    @Override
    public void activate() throws Exception {
        rootPage = getCurrentPage().getAbsoluteParent(2);

        if (rootPage == null) {
            rootPage = getCurrentPage();
        }

        Iterator<Page> childPages = rootPage.listChildren(new PageFilter(getRequest()));
           while (childPages.hasNext()) {
            items.add(childPages.next());
           }
    }

    // Returns the navigation items
    public List<Page> getItems() {
        return items;
    }
    // Returns the navigation root
    public Page getRoot() {
        return rootPage;
    }
}

然后我就可以使用这样的数据，

   <div data-sly-use.sidebarNavigationModel="services.agro.gde.core.models.SidebarNavigationModel" class="sidebar-navigation ae-spacing-indent">
    <div class="sidebar-nav-container">
        // This is a vue component that I am trying to pass data to. The data comes through as commas and when I expect an array an error throws in console stating it expects array but receives a string.
        <sidebar-navigation title="${properties.title}" items="${sidebarNavigationModel.items}"></sidebar-navigation>
    </div>
    // This outputs 16 commas to the screen ${sidebarNavigationModel.items}
    <ul class="nav navbar-nav navbar-center">
        // This outputs a link to home
        <li><a href="${sidebarNavigationModel.root.path}.html">HOME</a></li>
        // This outputs 19 links like I expect
        <li class="nav navbar-nav navbar-left" data-sly-repeat="${sidebarNavigationModel.items}">
            <a href="${item.path}.html">${item.title}</a>
        </li>
    </ul>
</div>

问题

如果我能更好地理解循环中返回的数据集，我相信我可以将其传递给vue组件，就像我尝试过的那样。

为什么在循环之外输出逗号以及为什么在将它传递给vue时它看起来像是一个字符串？

如果网站加载到数据集中，我如何获取网站的子页面？我可以从模板传递给我的vue组件？

Answer 1

HTL / Sightly正在尝试渲染数组但是对于每个项目它都不会呈现任何内容（因为它无法评估和呈现Page对象）。您可以做的是按下Use-Object中的数据以准确返回所需的字符串或在脚本中处理它，如：

[<sly data-sly-repeat="${logic.items}">{title="${item.title}",path="${sidebarNavigationModel.path}"}${itemList.last?'':','}</sly>]

Answer 2

vue组件正在打印逗号，因为java类返回的列表是com.day.cq.wcm.api.Page个对象的列表，而不是String列表。很明白它是一个Page对象，因此能够在其上调用页面方法来检索路径和标题。

获取子页面列表 - 您可以通过不同的方式执行此操作。取决于您的内容结构和您的要求 - 您认为是儿童页面和父页面。

您可以在所有父页面的页面属性中设置属性，并使用此属性标识父页面，然后构建父 - 子页面的地图。
或者，如果您的内容结构运行的级别超过了一个级别，并且您需要从层次结构深处获取子页面，则可以递归地获取所有子页面并将其格式化为您的vue组件可以理解的数据结构。
或者您可以使用Page API's，例如hasChild()，listChildren()等来推动构建父子导航结构的逻辑。

所有这一切都可以从你的java类中实现。

将数据传递到AEM

2 个答案: