13

在 Sightly 模板语言中，对于 Adob​​e 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>
4

2 回答 2

28

当动态设置 HTML 属性（使用表达式）时，Sightly 会猜测您的意图是为了简化编写：

  • 如果该值是一个空字符串或者它是 false 布尔值，那么该属性将被完全删除。
    例如<p class="${''}">Hi</p>，<p class="${false}">Hi</p>只渲染<p>Hi</p>.

  • 如果该值是真正的布尔值，则该属性被写为布尔 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 中一样，如果它是虚假的（例如 false 或空字符串）则${value1 && value2}返回value1，否则返回value2：

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

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

于 2014-07-03T14:01:08.263 回答
0

加布里埃尔所说的完全正确。我确实想添加一个“陷阱”来注意。作为记录，我遇到了完全相同的问题，在 Sightly 模板中，我想根据布尔值切换输入元素的“已检查”属性的存在。在我的例子中，这个布尔值来自支持的 Use 类。

大约 3-4 小时后，我快要拔掉头发了，我终于意识到我用来切换“已检查”属性的布尔值最终是在我写的 Sling 服务的激活方法中设置的我正在做的工作。虽然其他一切在逻辑上都是正确的，因为我在 activate() 中设置了这个布尔值，然后根据需要通过 getter 检索它，它只会在捆绑激活时更新它的值，这意味着我的视图在第一次刷新后基本上会丢失状态这页纸。

我知道这很愚蠢，但我想把它说出来，因为它在这里很重要，它可能会帮助人们不必像我一样掉头发......

于 2016-09-17T05:24:52.117 回答