如何在代码中为 HTML 属性添加条件逻辑

Question

我尝试搜索，但不知何故我无法思考我需要使用直观代码在 html 元素内添加动态标签的方法。不确定这是否是好的做法，但想问一下。现在我知道如何将 cssclass 应用于 href 中的 class 属性。但是如果我想在 href 中注入整个属性 "class='one'" 怎么办？

这个可以吗。我知道我可以做类似

的事情

<a href="${properties['jcr:titleurl']}" class="${properties.openinnewwindow ? 'nonunderline' : ''}"> <h3>${properties['jcr:title']}</h3></a>

但我想这样做，

<div class="col-md-12">       
<a href="${properties['jcr:titleurl']}"  data-sly-test="${properties.openinnewwindow ? 'class=one' : class='two'}"> <h3>${properties['jcr:title']}</h3></a>

Answer 1

使用 data-sly-test 来确定是保留还是删除该元素，因此这不是您要查找的内容。

您提到如果变量为 null 或空白则不需要 class 属性。您提供的带有三元运算符的代码将执行此操作。

<a href="#" class="${properties.openinnewwindow ? 'nonunderline' : ''}">link</a>

Sightly在概念上很像JavaScripttruthy/falsey。在您的示例中，如果 openinnewwindow 为真（true、非空或非未定义等），则 class 属性将等于 nonunderline。如果 openinnewwindow 为假，则 class 属性将不会出现在呈现的 HTML.

中

编写此代码的另一种方法是使用逻辑运算符 &&。此语法正是您所要求的：

<a href="#" class="${properties.openinnewwindow && 'nonunderline'}">link</a>

有关详细信息，请参阅 Sightly specification。

如何在代码中为 HTML 属性添加条件逻辑

How to add conditional logic in sightly code for an HTML attribute

aem

sightly