在 Slightly 的条件元素中包装标记？

Question

如果我需要将每 5 个项目包装在一个 div 中，这在 Slighthlty 中如何完成？我认为这会起作用，但 div 的结束标记永远不会呈现。我可以在开头 div 中进行测试，但在结尾 div 中无法进行测试。

<ul>
 <sly data-sly-test="${menuItemList.index == 0}"><div class="row-of-five"></sly>
  <li data-i="${menuItemList.index}">
   <a>${menuItem.linkText @ context = 'html'}</a>
  </li>
 <sly data-sly-test="${menuItemList.index == 5}"></div></sly>
</ul>

Answer 1

我认为这不能直接在 HTL 中完成，因为 HTL 始终假定有效嵌套，而单个打开或关闭 <div>，正如您在 sly data-sly-test 元素中所具有的那样，不是。

但是您可以在模型中创建五个列表，然后使用嵌套的 data-sly-repeat/data-sly-list 指令渲染它们。

虽然我希望这是伪代码，因为您的示例将是无效标记，因为 <ul> 标签只允许有 <li> 个子项，而不是 <div>s。

Answer 2

用 div 包裹所有元素，并使用 data-sly-unwrap 移除除第 5 个元素之外的所有元素的包裹：

<div data-sly-unwrap="${...}">...</div>

如果 ${} 中的表达式被计算为 true，只有 div 元素的内部内容将被渲染，而不是 div 本身。

在 Slightly 的条件元素中包装标记？

Wrapping markup in conditional elements in Slightly?

aem

sightly