如何在 AEM 中使用 HTL 有条件地添加数据属性？

Question

我看过很多与条件属性相关的例子，他们都在谈论这个：

<img  data-srcset="${myModel.isPrimaryImg ? '/img/image1.jpg': '/img/image2.jpg'}" >

这要么呈现

<img data-srcset="/img/image1.jpg" >

或

<img data-srcset="/img/image2.jpg" >

分别取决于${myModel.isPrimaryImg}是真还是假

这不是我想要的，上面的例子处理的是属性“值”部分

我想将三元组条件放在属性的 "Key" 部分，如下所示：

<img  ${myModel.isTrue ?'data-srcset=' : 'srcset='} = "/img/common-image.jpg" >

我希望它能呈现

两者都

<img  data-srcset= "/img/common-image.jpg" >

或

<img  srcset= "/img/common-image.jpg" >

据我所知，使用 JSP 是可能的

我希望它按我想要的方式工作的唯一方法是添加如下条件：

<img  data-sly-test="${myModel.isTrue}" data-srcset = "/img/common-image.jpg" ><!-- When TRUE -->
<img  data-sly-test="${!myModel.isTrue}" srcset = "/img/common-image.jpg" >!-- When FALSE -->

但这需要两个完整的标签，每个标签一个

是否有更好的方法将三元条件放入 HTL 中用于数据属性键而不是值？

我有很多这样的标签，所以我在想是否可以只在一行中满足条件，否则我最终会将标签的数量加倍，其中每个标签将包含一个基于值的属性标志的一个代表真，一个代表假条件。

Answer 1

您可以：

使用 data-sly-attribute 并通过 Use-Object 对象将属性公开为地图。然后，您可以在 Use-Object 中控制地图键。
利用未呈现的空属性 (spec) 并执行以下操作：

<img data-srcset="${myModel.isTrue ? '/img/common-image.jpg' : ''}" srcset="${!myModel.isTrue ? '/img/common-image.jpg' : ''}">

这是合理的可读性，将使您的 HTL 脚本 HTML-有效。

如何在 AEM 中使用 HTL 有条件地添加数据属性？

How to add data-attribute conditionally using HTL in AEM?

aem

sightly