Question

在Sightly模板语言中，对于Adobe AEM6（CQ），如果条件为真，如何在不重复大量代码/逻辑的情况下向元素添加属性？

e.g。

<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>。
如果值为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>

逻辑AND运算符

为此，您还需要了解，就像在JavaScript中一样，${value1 && value2}如果是假的（例如false或空字符串）则返回value1，否则返回value2：

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

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

Answer 2

加布里埃尔所说的是完全正确的。我确实想要添加一个＆＃34; gotcha＆＃34;但要注意。为了记录，我遇到了完全相同的问题，在一个Sightly模板中，我想切换输入元素的存在＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;属性基于布尔值。在我的例子中，这个布尔值来自支持使用类。

大约3-4个小时后，我的头发一直拉着，我终于意识到我依靠的布尔值来切换＆＃34;检查＆＃34;属性最终是在Sling服务的activate方法中设置的，我写的是为了支持我正在做的工作。虽然其他一切在逻辑上都是正确的，因为我在activate（）中设置了这个布尔值，然后根据需要通过getter检索它，它只会在bundle激活时更新其值，这意味着我的视图在第一次刷新之后基本上会失去状态。页面。

我知道这很愚蠢，但我想把它叫出来，因为它在这里很重要，它可能会帮助别人不要像我那样失去一些头发......

视觉模板中的条件属性（AEM / CQ）

2 个答案:

三元条件运算符

逻辑AND运算符