Sightly/HTL 组件内的条件处理取决于页面内的位置答案

【问题标题】：Conditional processing within a Sightly/HTL component dependent upon position within a pageSightly/HTL 组件内的条件处理取决于页面内的位置
【发布时间】：2022-10-17 13:18:22
【问题描述】：

我最近开始担任 AEM 项目的 Ops 开发人员，我们有一个组件（一个表格，有一个标题、一些副本和一个字段，作者可以在其中创作一些 HTML 来表示表格的内容，以及元素。无论出于何种原因，它都必须位于一个名为 ArticleContainer 的组件中。如果表格位于页面顶部，则标题应该有一个 H1 标签，如果它位于页面下方，则应该有一个 H2 标签。我试过了因此使用 data-sly-test ：

<sly data-sly-test.topOfPage="${table.firstPosition==true}">
    <h1 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
        <span class="tableHeadingWrapper">${table.headerCopy @ context='html'}</span>
    </h1>
</sly>
<sly data-sly-test="${!topOfPage}">
    <h2 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
        <span class="tableHeadingWrapper">${table.headerCopy @ context='html'}</span>
    </h2>
</sly>

现在，这种处理已经在组件不在容器中的其他地方起作用，但似乎如果它在容器中，它总是会选择非 topOfPage 条件。我认为可能有一种方法可以在容器组件中进行测试并将其传递到表组件中？一个人将如何解决这个问题，或者如果不可能，是否有另一种方法可以实现这一目标？

【问题讨论】：

标签： aem sightly

【解决方案1】：

这里有两件事：

table.firstPosition 返回什么？您应该能够在您的 Sling 模型或 POJO 中对此进行调试，并且可能需要调整逻辑以考虑中间容器。

HTL/Sightly 有一个data-sly-element，它允许您根据表达式更改 HTML 元素，您可以使您的代码更短（并且更易于维护）：

<h1 data-sly-test="${table.headerCopy}" data-sly-element="${table.firstPosition ? 'h1' : 'h2'}" class="heading fontH2 headingLinear headingThick">
    <span class="tableHeadingWrapper">${table.headerCopy @ context='html'}</span>
</h1>

【讨论】：