AEM中如何根据布尔条件动态显示/隐藏HTML自定义属性

假设有一个名为isDisabled的布尔参数，需求逻辑为：

• 当isDisabled值为true时，为元素添加自定义HTML属性data-enable-hide
• 当isDisabled值为false时，不渲染该属性

最初的实现方案通过data-sly-test写了两个重复的DOM分支：

<div data-sly-test="${model.isDisabled}">
    <div class="container" data-enable-hide>
          Hello World
    </div>
</div>
<div data-sly-test="${!model.isDisabled}">
    <div class="container">
          Hello World
    </div>
</div>

该方案虽然能实现预期效果，但内部HTML完全重复，两个分支的唯一差异仅为是否携带目标属性，代码冗余、后续维护成本高。

AEM的HTL（Sightly）语法原生支持属性级别的条件渲染，不需要编写重复DOM：当绑定到HTML属性上的HTL表达式返回布尔值false时，该属性会被直接从最终输出的DOM中移除，不会被渲染。

针对该需求只需要写一次DOM结构即可：

<div class="container" data-enable-hide="${model.isDisabled}">
    Hello World
</div>

渲染逻辑完全符合预期：

• 当model.isDisabled为true时，输出带data-enable-hide属性的元素
• 当model.isDisabled为false时，输出不带该属性的元素

这个语法对所有HTML属性通用，不管是原生属性还是自定义属性，都可以用这种方式直接控制是否渲染，不需要额外嵌套分支标签。

内容的提问来源于stack exchange，提问作者superninja