视觉模板中的条件属性(AEM/CQ)

Question

在Sightly模板语言中,对于Adobe 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属性(使用表达式)时,请务必猜测您简化写作的意图:

• 如果该值为空字符串或者如果它是false布尔值,则该属性将完全删除.
  例如<p class="${''}">Hi</p>,<p class="${false}">Hi</p>只渲染<p>Hi</p>.

• 如果值是真的布尔值,则该属性被写为布尔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>

逻辑AND运算符

对于这一点,你还必须明白,像在JavaScript中,${value1 && value2}返回value1如果是falsy(如假,或空字符串),否则返回value2:

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

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