是否可以在 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）时似乎可以工作，当添加 subdivs 时它开始崩溃。

Answer 1

不，这是不允许的，因为 HTL 脚本应该是有效的 HTML（因此没有 unfinished/conditional 标签）。不过有一些解决方法。假设您的项目看起来像（可以使用 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>

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

Is it possible in HTL/Sightly to open or close tag conditionally?

aem

sightly