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

奥立佛

我已经看到了大量与条件属性相关的示例,他们都在谈论这一点:

<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}是true还是false

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

我想将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中用于数据属性键而不是值?

我有很多这样的标签,所以我在考虑是否只能将条件放在一行中,否则我将使标签数量加倍,其中每个标签将基于标志的值包含一个属性,即正确和错误条件之一。

弗拉德

您可以:

  1. 使用data-sly-attribute和暴露的属性通过使用-Object对象的地图。然后,您可以在“使用对象”中控制地图键。
  2. 利用未呈现的空属性(spec)并执行以下操作:
<img data-srcset="${myModel.isTrue ? '/img/common-image.jpg' : ''}" srcset="${!myModel.isTrue ? '/img/common-image.jpg' : ''}">

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Angular指令模板中有条件地添加数据属性

来自分类Dev

如何在有条件的组件上有条件地添加道具?

来自分类Dev

如何使用FluentValidation有条件地验证属性?

来自分类Dev

如何在angular中使用ng-if有条件地显示消息

来自分类Dev

如何在 Pandas 中使用 .assign 方法有条件地分配计算列?

来自分类Dev

如何在不使用CASE的情况下有条件地添加WHERE子句

来自分类Dev

有条件地向JavaScript对象添加属性

来自分类Dev

有条件地以角度添加属性

来自分类Dev

Angular 2有条件地添加属性指令

来自分类Dev

在React中有条件地添加HTML属性

来自分类Dev

AWS Cloudformation有条件地添加资源属性

来自分类Dev

有条件地在angularjs中添加/删除属性

来自分类Dev

有条件地添加hide-xs属性

来自分类Dev

如何有条件地读取所有属性?

来自分类Dev

如何有条件地向javascript对象文字添加属性

来自分类Dev

Thymeleaf-如何添加选中的属性以有条件地输入

来自分类Dev

Thymeleaf-如何添加选中的属性以有条件地输入

来自分类Dev

如何有条件地向 Angular 6 中的 HTML 元素添加属性

来自分类Dev

如何在使用JSON.Net进行序列化期间有条件地忽略字段和属性?

来自分类Dev

在 Ramda 中有条件地添加和重命名属性而不使用镜头

来自分类Dev

Angular:如何通过在条件中使用日期管道有条件地应用样式?

来自分类Dev

Wix-如何有条件地设置属性

来自分类Dev

如何有条件地禁用routerLink属性?

来自分类Dev

如何有条件地呈现状态属性

来自分类Dev

如何有条件地添加脚本包?

来自分类Dev

如何有条件地向组件添加文本?

来自分类Dev

如何在有条件的js中有条件地应用标题

来自分类Dev

AngularJS-有条件地使用属性指令

来自分类Dev

使用jQuery有条件地设置属性

Related 相关文章

  1. 1

    在Angular指令模板中有条件地添加数据属性

  2. 2

    如何在有条件的组件上有条件地添加道具?

  3. 3

    如何使用FluentValidation有条件地验证属性?

  4. 4

    如何在angular中使用ng-if有条件地显示消息

  5. 5

    如何在 Pandas 中使用 .assign 方法有条件地分配计算列?

  6. 6

    如何在不使用CASE的情况下有条件地添加WHERE子句

  7. 7

    有条件地向JavaScript对象添加属性

  8. 8

    有条件地以角度添加属性

  9. 9

    Angular 2有条件地添加属性指令

  10. 10

    在React中有条件地添加HTML属性

  11. 11

    AWS Cloudformation有条件地添加资源属性

  12. 12

    有条件地在angularjs中添加/删除属性

  13. 13

    有条件地添加hide-xs属性

  14. 14

    如何有条件地读取所有属性?

  15. 15

    如何有条件地向javascript对象文字添加属性

  16. 16

    Thymeleaf-如何添加选中的属性以有条件地输入

  17. 17

    Thymeleaf-如何添加选中的属性以有条件地输入

  18. 18

    如何有条件地向 Angular 6 中的 HTML 元素添加属性

  19. 19

    如何在使用JSON.Net进行序列化期间有条件地忽略字段和属性?

  20. 20

    在 Ramda 中有条件地添加和重命名属性而不使用镜头

  21. 21

    Angular:如何通过在条件中使用日期管道有条件地应用样式?

  22. 22

    Wix-如何有条件地设置属性

  23. 23

    如何有条件地禁用routerLink属性?

  24. 24

    如何有条件地呈现状态属性

  25. 25

    如何有条件地添加脚本包?

  26. 26

    如何有条件地向组件添加文本?

  27. 27

    如何在有条件的js中有条件地应用标题

  28. 28

    AngularJS-有条件地使用属性指令

  29. 29

    使用jQuery有条件地设置属性

热门标签

归档