僅當存在時才在 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>