aem - Sightly 模板 (AEM/CQ) 中的条件属性

Question

在 Sightly 模板语言中，对于 Adob​​e AEM6 (CQ)，如何仅当条件为真时才向元素添加属性，而无需复制大量代码/逻辑？

例如

<ul data-sly-list="${items}" ${if condition1} class="selected"${/if}>
    <li${if condition2} class="selected"${/if}>
        Lots of other code here
    </li>
</ul>

Answer 1

动态设置 HTML 属性时(使用表达式)，Sightly 猜测您的意图是为了简化编写:

如果该值是一个空字符串或者它是 false bool 值，则该属性将被完全删除。
例如 <p class="${''}">Hi</p>和 <p class="${false}">Hi</p>仅渲染 <p>Hi</p> .

如果该值为 true bool 值，则该属性将写入 bool HTML 属性(即没有属性值，例如已选中、已选择或已禁用的表单属性)。
例如 <input type="checkbox" checked="${true}">渲染 <input type="checkbox" checked> .

然后，您可以使用两个 Sightly 运算符来实现您想要的(两者都在 JavaScript 中工作):三元条件运算符或逻辑 AND ( && ) 运算符。

三元条件运算符

<ul data-sly-list="${items}" class="${condition1 ? 'selected' : ''}">
    <li class="${condition2 ? 'selected' : ''}">
        Lots of other markup here
    </li>
</ul>

逻辑与运算符

为此，您还必须了解，就像在 JavaScript 中一样， ${value1 && value2}返回 value1如果为假(例如假，或空字符串)，否则返回 value2 :

<ul data-sly-list="${items}" class="${condition1 && 'selected'}">
    <li class="${condition2 && 'selected'}">
        Lots of other markup here
    </li>
</ul>

如上所述，在两个示例中，如果相应的条件为假，则 class 属性将被完全删除。