如何在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}是真还是假

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

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

<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

您可以：

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

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

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