AEM - Sightly : data-sly-attribute 擦除标签上的 css答案

【问题标题】：AEM - Sightly : data-sly-attribute erasing css on tagAEM - Sightly : data-sly-attribute 擦除标签上的 css
【发布时间】：2016-04-24 05:11:49
【问题描述】：

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

取以下代码：

模板 (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。

问题是，当这段代码在 Author 上执行时效果很好，但是当我在 Publisher 上执行时：

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"

它在 Author 和 Publisher 上呈现得非常好。

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

谢谢尼古拉

【问题讨论】：

你试过XSS上下文吗？这是文档：docs.adobe.com/docs/en/aem/6-0/develop/sightly/… Context 类似于 data-sly-attribute="${attr.attributeMap @context='styleString'}"

标签： java html css aem sightly

【解决方案1】：

这似乎是预期的行为。这是Adobe's docs的引述：

属性从左到右解析，属性的最右边实例（文字或通过 data-sly-attribute 定义）优先于同一属性的任何实例（按字面定义或通过 data-sly-attribute 定义）定义在它的左边。

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

【讨论】：