条件语句一目了然

Question

在 Sightly 模板语言中，对于 Adobe AEM6，如果条件为真，我如何使用特定的 class？

${properties.reduceImage} 是我的复选框，所以如果复选框被选中然后添加 class 如果没有那么它不会 return 任何东西。我不确定我这样做是否正确。

<div data-sly-test="${properties.reduceImage}" data-sly-unwrap>
    <div class="reduce-image">
    </div>
</div>

Answer 1

Sightly 的表达式语言有一些运算符可以执行类似的操作。

对于您的情况，您有两种可能性：条件运算符或逻辑 AND (&&) 运算符。

条件运算符

此运算符的工作方式类似于 data-sly-test，但在表达式级别。问号（?）之前的是条件，然后是两部分，用一栏隔开（:）。第一部分是条件为真时的输出，第二部分是条件为假时的输出（我们在您的示例中留空）。

<div class="${properties.reduceImage ? 'reduce-image' : ''}">
</div>

逻辑与运算符

这篇文章有点短，但其意图也不那么明确。它使用这样的事实，如 JavaScript、${value1 && value2} returns value1 如果它是假的（例如 false，或空字符串），否则它 returns value2:

<div class="${properties.reduceImage && 'reduce-image'}">
</div>

在这两个示例中，如果相应条件为假，class 属性将被完全删除，因为 Sightly 会删除所有表达式最终为空或为假的属性。

Condition statements in sightly