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

问题描述

我是 AEM 的新手，因此非常感谢您的建议。

假设我有这样的事情：

.parquet

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

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

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

我该怎么做？

附注。当结构很简单（没有嵌套的 div）似乎可以工作时，当添加细分时，它开始中断。

解决方法

不，这是不允许的，因为 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,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>