在 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 中是否可行？我可以纯粹在html中做到这一点吗？ 目前，这对我不起作用，我想有一些我不知道的自动化正在发生。

我该怎么做？

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

Answer 1

不，这是不允许的，因为 HTL 脚本应该是有效的 HTML（因此没有未完成/条件标签）。不过有一些解决方法。假设您的项目看起来像（JS use-object that can betested with HTL REPL）：

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>