仅在 Sightly/HTL 存在时添加属性 (AEM)

Question

我有一个组件可以从对话框中获取图像的路径并进行渲染。这是组件的片段 -

<div class="${something}" style="background-image:url('${properties.backgroundImageReference @ context='styleString'}');">
</div>

这很好用，但我想添加一个逻辑，仅当 properties.backgroundImageReference 存在时才生成 style 属性。

有没有快速的方法？请注意，我不想使用封闭的 data-sly-test 条件。

谢谢

Answer 1

当未设置属性时，您可以在可以 return null/empty 的 Use-Object 中生成整个样式字符串，然后将跳过该属性。

示例见https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/wcm/components/container/v1/container/simple.html#L21！

另一种选择是使用 data-sly-set 定义整个背景样式并利用三元运算符：

<div class="${something}" 
   data-sly-set.backgroundStyle="background-image:url('${properties.backgroundImageReference @ context='styleString'}');"
   style="${properties.backgroundImageReference ? backgroundStyle : ''}">
</div>

Answer 2

这是解决这个问题的所有三个选项

吊带型号

使用 sling 模型是首选方法，因为它提供了更好的关注点分离并保持 HTL 清洁，并且您可以为模型编写测试。

package com.yourproject.models;

@Model(adaptables = Resource.class ,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class Image {

   @ValueMapValue
   private String backgroundImageReference;

   private String backgroundStyle;

   @PostConstruct
   public void init() {
       if (backgroundImageReference != null) {
         backgroundStyle = String.format("background-image:url('%s')", backgroundImageReference);
      }
   }

   public String getBackgroundStyle() {
      return backgroundStyle;
   }
}

<sly data-sly-use.image="com.yourproject.models.Image">
    <div class="${something}" style="${image.backgroundStyle}">
    </div>
</sly>

仅限 HTL

如果您觉得 Sling 模型有点矫枉过正，您可以选择仅使用 HTL 的方法。缺点是您的 HTL 会很快变得复杂且难以维护。

<sly data-sly-test.backgroundImage="background-image:url('${properties.backgroundImageReference});"
            data-sly-test.backgroundImageStyle="${properties.backgroundImageReference ? backgroundImage : '' }"></sly>

<div class="${something}" style="${backgroundImageStyle}"></div>

Use.js

Use.js 是我认为最不推荐的方式。你无法调试代码，无法编写测试，使用非常古老的 JS 引擎将 JS 编译成 Java 并且有一些非常讨厌的错误，例如布尔比较

// image.use.js    

'use strict';
use([], function () {
    var backgroundImageReference = properties.get('backgroundImageReference', '');
    var backgroundStyle = backgroundImageReference != ''
        ? "background-image:url('" +  backgroundImageReference + "')"
        : '';

    return {
        backgroundStyle: backgroundStyle
    };
});

<sly data-sly-use.image="image.use.js">
    <div class="${something}" style="${image.backgroundStyle}">
    </div>
</sly>

仅在 Sightly/HTL 存在时添加属性 (AEM)

Add attribute in Sightly/HTL only if it exists (AEM)

aem

sightly

吊带型号

仅限 HTL

Use.js