AEM/CQ模板中的条件属性

Question

在Adobe AEM6 (CQ)的sight模板语言中，如何仅在条件为真时才向元素添加属性，而无需复制大量代码/逻辑?

。

<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属性(使用表达式)时，sight猜测您的意图是简化编写:

• 如果该值为空字符串或为假布尔值，则该属性将被完全删除。
  例如，<p class="${''}">Hi</p>和<p class="${false}">Hi</p>只渲染<p>Hi</p>。

• 如果值为真布尔值，则该属性将被写入布尔HTML属性(即没有属性值，例如checked, selected或disabled form属性)。
  例如<input type="checkbox" checked="${true}">渲染<input type="checkbox" checked>

然后你可以使用两个轻量级操作符来实现你想要的(两者都在JavaScript中工作):三元条件操作符，或逻辑与(&&)操作符。

三元条件运算符

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

逻辑与运算符

为此，您还必须理解，像JavaScript一样，${value1 && value2}返回value1，如果它是false(例如false，或空字符串)，否则它返回value2:

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

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

Answer 2

Gabriel说的完全正确。不过，我确实想添加一个需要注意的"gotcha"。为了记录，我遇到了完全相同的问题，在一个sight模板中，我想根据布尔值切换输入元素的"checked"属性的存在。在我的例子中，这个布尔值来自后面的Use类。

大约3-4个小时后，我终于意识到，我所依赖的用于切换"checked"属性的布尔值最终是在我编写的一个Sling服务的激活方法中设置的，以支持我正在做的工作。虽然其他一切在逻辑上都是正确的，因为我在activate()中设置了这个布尔值，然后根据需要通过getter获取它，它的值只会在bundle激活时更新，这意味着我的视图在第一次刷新页面后基本上会失去状态。

我知道这很傻，但我想把它说出来，因为它在这里是相关的，它可能会帮助人们不必像我一样失去一些头发…