Блог

Главная - Вопросы по программированию - AEM: как общий компонент, введенный в несколько компонентов, может иметь динамическое значение

AEM: как общий компонент, введенный в несколько компонентов, может иметь динамическое значение

#adobe #aem #sightly #aem-6

#adobe #aem #sightly #aem-6

Вопрос:

У меня есть общий компонент, который вводится в несколько компонентов через data-sly-resource.

ComponentA

 <div
  data-sly-resource="${ 'abc' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

ComponentB

 <div
  data-sly-resource="${ 'xyz' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

В some-common-component.html в div необходимо добавить «класс», который будет динамичным и специфичным для компонента, из которого он вводится. Например, когда этот компонент добавляется в ComponentA
, html будет:
<div class="componenta-button"></div>
и при добавлении в ComponentB это будет <div class="componentb-button"></div>

Как я могу этого добиться? Как я узнаю, кто вводит этот компонент, или можно отправить дополнительные параметры из родительского компонента, к которому я могу получить доступ some-common-component.html

Ответ №1:

Для этого варианта использования, вероятно, лучше всего использовать шаблоны HTL:

 <sly data-sly-use.common="common.html" data-sly-call="${common.myTemplate @ buttonClass='myClassA'}"></sly>

Комментарии:

1. Но это не просто компонент на основе шаблона. У этого общего компонента есть диалоговое окно cq:

2. Если вы можете управлять / переписывать включенный компонент, вы можете реорганизовать его как основной скрипт и шаблон, который также может вызываться основным скриптом и другими компонентами. В качестве альтернативы, если вам НЕОБХОДИМО использовать data-sly-resource , вы можете использовать requestAttributes : docs.adobe.com/content/help/en/experience-manager-htl/using/htl /…

Ответ №2:

Вы можете использовать requestAttributes (см. Здесь )

Компонент A (передача значения):

Sightly :

 <sly data-sly-use.compA = "com.mysite.core.models.CompA"/>
<div
  data-sly-resource="${ 'abc' @ resourceType = 'btplayer-cms/components/content/some-common-component', requestAttributes = compA.attribute }">
</div>

Модель Sling :

 package com.realogy.sir.core.models;

import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class)
public class CompA {

    public Map<String, Object> attribute = new HashMap<>();

    @PostConstruct
    protected void init() {
        attribute.put("attributeVal", "componenta");
    }
}

Компонент B (передача значения):

Sightly :

 <sly data-sly-use.compB = "com.mysite.core.models.CompB"/>
<div
  data-sly-resource="${ 'xyz' @ resourceType = 'btplayer-cms/components/content/some-common-component', requestAttributes = compB.attribute }">
</div>

Модель Sling :

 package com.realogy.sir.core.models;

import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class)
public class CompB {

    public Map<String, Object> attribute = new HashMap<>();

    @PostConstruct
    protected void init() {
        attribute.put("attributeVal", "componentb");
   }
}

Общий компонент (потребляющий значение):

Sightly :

 <sly data-sly-use.commonComp= "com.mysite.core.models.CommonComp"/>
<div class="${[commonComp.attributeVal, 'button'] @ join='-'}"></div>

Модель Sling:

 package com.mysite.core.models;

import javax.inject.Inject;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;

@Model(adaptables = SlingHttpServletRequest.class)
public class CommonComp {

    @Inject @Optional @Default(values="component")
    private String attributeVal;

    public String getAttributeVal() {
        return attributeVal;
    }

}