java - AEM-视觉 : data-sly-attribute erasing css on tag

Question

我目前正在开发 AEM 6.0 的组件，我注意到 data-sly-attributesightly 属性有一个非常奇怪的行为，我想知道这是否已被其他人注意到(可能是一个错误)。

采用以下代码:

模板 (html)

<div id="${properties.divId}" 
data-sly-use.attr="com.something.sightly.promoModel" 
     data-sly-attribute="${attr.attributeMap}">

     <a href="www.example.com" 
        class="btn btn-transparent" 
        data-sly-attribute.target="${properties.ckbNewWindow}" 
        **data-sly-attribute="${attr.attributeMap}"**>
       ${properties.ctaText}
    </a>

</div>

模型(java)

public class PromoModel{
    protected HashMap<String, String> attributeMap = new HashMap<String, String>();
    @Override
    public void activate() throws Exception {
        attributeMap= ComponentUtils.buildDataAttributeMapFromResource(Constants.DATA_ATTRIBUTES_FIELD, getRequest());
}

public HashMap<String, String> getAttributeMap(){
    return attributeMap;

}

使用 buildDataAttributeMapFromResource 函数，该函数基本上根据组件中的内容填充 HashMap。

问题是，当此代码在作者上执行时效果很好，但当我在发布者上执行时:

class="btn btn-transparent"

不渲染。看起来 data-sly-attribute 正在覆盖它并因此删除它，因为如果我将模板更改为:

<div id="${properties.divId}" 
data-sly-use.attr="com.something.sightly.promoModel" 
     data-sly-attribute="${attr.attributeMap}">

     <a **data-sly-attribute="${attr.attributeMap}"**
        href="www.example.com" 
        class="btn btn-transparent" 
        data-sly-attribute.target="${properties.ckbNewWindow}">
       ${properties.ctaText}
    </a>

</div>

请注意

data-sly-attribute="${attr.attributeMap}"

在前面

class="btn btn-transparent"

它在作者和出版商上呈现得非常好。

错误？也许有一个我不知道的解决方案......？任何建议都会很棒。

谢谢尼古拉

Answer 1

这似乎是预期的行为。这是来自 Adobe's docs 的引用:

Attributes are resolved left to right, with the rightmost instance of an attribute (either literal or defined via data-sly-attribute) taking precedence over any instances of the same attribute (defined either literally or via data-sly-attribute) defined to its left.

这意味着，如果您的属性映射包含 class 属性，那么它将优先于文字类属性(如果它位于右侧)。