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

Question

我有一个组件，它从对话框中获取图像的路径并呈现它。 这是组件的片段 -

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

这工作正常，但我想添加一个逻辑来仅在properties.backgroundImageReference存在时生成style属性。

有没有一种快速的方法来做到这一点？ 请注意，我不想使用封闭的data-sly-test条件。

谢谢

Answer 1

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

请参阅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

这里有接近这个的所有三个选项

吊索 Model

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

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 Model 太过分了，您可以选择仅 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>

使用.js

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

// 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>