Sightly模板中的条件属性（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>

- Alasdair McLeay

Answer 1

动态设置HTML属性时（使用表达式），Sightly会猜测您的意图以简化编写： - 如果值为空字符串或为false布尔值，则完全删除该属性。 例如，<p class="${''}">Hi</p>和<p class="${false}">Hi</p>只渲染为<p>Hi</p>。 - 如果值为true布尔值，则将属性写成布尔型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 是假值（例如false或空字符串），则返回value1，否则返回value2：

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

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

- Gabriel Walt

Answer 2

加布里埃尔所说的完全正确。我想要补充一个需要注意的问题。就记录而言，我遇到了完全相同的问题，在Sightly模板中，我想要根据一个布尔值来切换输入元素的"checked"属性的存在与否。在我的情况下，这个布尔值是从后端的Use类中获取的。

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

我知道这听起来有点傻，但我想提醒一下，因为这与这里的内容相关，并且可能帮助某人避免像我一样掉发...

- Josh Boyle