aem - 如何在 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} 分别为真或假
这不是我想要的，上面的例子处理 “值(value)”属性的一部分
我想把 ternery 条件放在 上“ 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 中用于数据属性键而不是值？
我有很多这样的标签，所以我在想是否我只能在一行中满足条件，否则我最终会将标签数量加倍，其中每个标签将包含一个基于标志值的一个属性true 和 false 条件之一。

Answer 1

您可以:

使用 data-sly-attribute并通过 Use-Object 对象将属性公开为映射。然后，您可以控制 Use-Object 中的 map 键。

利用未呈现的空属性( spec )并执行以下操作:

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

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