aem - 条件语句一目了然

Question

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

${properties.reduceImage} 是我的复选框，因此如果选中该复选框，则添加该类，否则它不会返回任何内容。我不确定我是否以正确的方式这样做。

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

score 14 · Accepted Answer

Sightly 的表达语言有一些操作符可以做这样的事情。

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

条件运算符

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

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

逻辑与运算符

这篇文章有点短，但它的意图也不太明确。它使用这样一个事实，就像在 JavaScript 中一样，如果 ${value1 && value2} 为假（例如，假或空字符串），则返回 value1，否则返回 value2：

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

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

1 回答 1