aem - HTL/Sightly 是否可以有条件地打开或关闭标签？

Question

我是 AEM 新手，因此欢迎提供任何建议。

假设我有这样的东西:

<div class="big-item" data-sly-list="${features.list}">
     
     <sly data-sly-test="${ itemList.first || itemList.count == 5 || itemList.count == 9 || itemList.count == 13 || itemList.count == 17 }">
         <div class="small-item-wrapper>
             <div class="additional-div">
     </sly>

            <div class="small-item">
                <div>${item.somecontent}</div>
            </div>

     <sly data-sly-test="${ itemList.last || itemList.count == "4 || itemList.count == 8 || itemList.count == 12 || itemList.count == 16 }">               
            </div>   
            </div>  
      </sly>

</div>

基本上，我想做的是将每 4 个项目包装在一个单独的容器中。

目前，结束标记未呈现，或者仅在最后一次迭代后才关闭。

这种 html 模板方法在 AEM 中可行吗？我可以纯粹用 htl 来做这个吗？ 目前，这对我不起作用，我想有一些我不知道的自动化正在发生。

我该怎么做？

PS。当结构很简单(没有嵌套 div)时似乎可以工作，当添加 subdiv 时它开始崩溃。

Answer 1

不，这是不允许的，因为 HTL 脚本应该是有效的 HTML(因此没有未完成/条件标记)。不过，有一些解决方法。让我们假设您的项目看起来像(可以使用 HTL REPL 进行测试的 JS 使用对象):

use(function () {
    return {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
});

然后您可以使用此 HTL 脚本呈现它们:

<div class="big-item" data-sly-use.logic="logic.js">
    <div class="small-item-wrapper" data-sly-test="${logic.list.length > 0}">
        <div class="additional-div">
            <div class="small-item" data-sly-repeat="${logic.list @ begin=0, end=3}">
                <div>${item}</div>
            </div>
        </div>
    </div>
     <div class="small-item-wrapper" data-sly-test="${logic.list.length > 4}">
        <div class="additional-div">
            <div class="small-item" data-sly-repeat="${logic.list @ begin=4, end=7}">
                <div>${item}</div>
            </div>
        </div>
    </div>
     <div class="small-item-wrapper" data-sly-test="${logic.list.length > 8}">
        <div class="additional-div">
            <div class="small-item" data-sly-repeat="${logic.list @ begin=8, end=11}">
                <div>${item}</div>
            </div>
        </div>
    </div>
     <div class="small-item-wrapper" data-sly-test="${logic.list.length > 12}">
        <div class="additional-div">
            <div class="small-item" data-sly-repeat="${logic.list @ begin=12, end=15}">
                <div>${item}</div>
            </div>
        </div>
    </div>
</div>

它很丑陋，并且硬编码了最多 16 个项目，但应该可以工作。

如果您可以提前“处理”数据，您可以准备一组 [begin, end] 标记并使 HTL 脚本更好。这是使用对象:

use(function () {
    let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
    let markers = [];
    for (let i=0; i<list.length; i++) {
        if (i % 4 === 0) {
            markers.push([i, i+3]);
        }
    }
    return {
        markers: markers,
        list: list
    };
});

以及相应的HTL脚本:

<div class="big-item">
    <div class="small-item-wrapper" data-sly-repeat.marker="${logic.markers}">
        <div class="additional-div">
            <div class="small-item" data-sly-repeat="${logic.list @ begin=marker[0], end=marker[1]}">
                <div>${item}</div>
            </div>
        </div>
    </div>
</div>