如果页面上没有可见的子子页面,如何从列表中隐藏页面的名称?

时间:2019-01-09 05:59:05

标签: aem sightly

我只想显示标题中包含子页面的那些页面。使用以下代码

<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list"  >
    <li aria-haspopup="true"  data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
        <a class="" href="javascript:void(0);" data-sly-test="!${item.hasChild}">${item.title}</a>
        <div class="wsmegamenu clearfix ">
            <div class="container paddingmenu">
                 <div class="row">
                     <div class="menuimgdiv"  data-sly-repeat.subcategory="${item.listChildren}">
                         <h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
                         <ul>
                             <li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path  @ extension='html'}">${page.title}</a></li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
     </li>
     <li aria-haspopup="true"><a href="http://dot.odishatourism.gov.in/" target="_blank"> Dept of Tourism</a></li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>

给出以下输出

enter image description here

但是此代码-

<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
    <ul class="wsmenu-list"  >
        <li aria-haspopup="true"  data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
            <a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
                <div class="wsmegamenu clearfix ">
                    <div class="container paddingmenu">
                        <div class="row">
                            <div class="menuimgdiv"  data-sly-repeat.subcategory="${item.listChildren}">
                                <h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
                                <ul>
                                    <li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path  @ extension='html'}">${page.title}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li aria-haspopup="true"><a href="http://dot.odishatourism.gov.in/" target="_blank"> Dept of Tourism</a></li>
        </ul>
        <a class="wsdownmenu-animated-arrow"><span></span></a>
        <div class="wsdownmenu-text">Navigation</div>
    </nav>

给出如下所示的输出

enter image description here

代码

<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>

无法正常工作。

我的网站结构如下所示

enter image description here

实际的期望输出是

enter image description here

1 个答案:

答案 0 :(得分:1)

您不能在测试条件下使用${item.hasChild},因为Page API的hasChild()方法要求您传递参数。 AFAIK,HTL不支持参数化方法的调用。

由于没有可用的直接API检查页面是否具有子页面,因此您可能需要执行以下操作来验证页面是否具有子页面

<a class="" href="javascript:void(0);" data-sly-test="${item.listChildren && item.listChildren.hasNext}">${item.title}</a>

但是,我宁愿使用Sling模型或WCM Use API构建整个导航树,而不希望在HTL中调用太多方法。这将使代码更易于维护,更改和测试。 YMMV