HTL JavaScript Use-API

HTML範本語言(HTL)JavaScript Use-API可讓HTL檔案存取以JavaScript編寫的輔助程式碼。 這可讓所有複雜的商業邏輯封裝在JavaScript程式碼中，而HTL程式碼則僅處理直接標籤製作。

使用下列慣例。

/**
 * In the following example '/libs/dep1.js' and 'dep2.js' are optional
 * dependencies needed for this script's execution. Dependencies can
 * be specified using an absolute path or a relative path to this
 * script's own path.
 *
 * If no dependencies are needed the dependencies array can be omitted.
 */
use(['dep1.js', 'dep2.js'], function (Dep1, Dep2) {
    // implement processing
  
    // define this Use object's behavior
    return {
        propertyName: propertyValue
        functionName: function () {}
    }
});

簡單範例

我們定義一個元件info，位於

/apps/my-example/components/info

它包含兩個檔案：

  • info.js:定義use-class的JavaScript檔案。
  • info.html:定義元件的HTL檔案 info。此程式碼將透過use-API使用info.js的功能。

/apps/my-example/component/info/info.js

"use strict";
use(function () {
    var info = {};
    info.title = resource.properties["title"];
    info.description = resource.properties["description"];
    return info;
});

/apps/my-example/component/info/info.html

<div data-sly-use.info="info.js">
    <h1>${info.title}</h1>
    <p>${info.description}</p>
</div>

我們也會建立使用info元件的內容節點，位於

/content/my-example, with屬性：

  • sling:resourceType = "my-example/component/info"
  • title = "My Example"
  • description = "This is some example content."

以下是生成的儲存庫結構：

儲存庫結構

{
  "apps": {
    "my-example": {
      "components": {
        "info": {
          "info.html": {
            ...
          },
          "info.js": {
            ...
          }
        }
      }
    }
 },
 "content": {
    "my-example": {
      "sling:resourceType": "my-example/component/info",
      "title": "My Example",
      "description": "This is some example content."
    }
  }
}

請考慮下列元件範本：

<section class="component-name" data-sly-use.component="component.js">
    <h1>${component.title}</h1>
    <p>${component.description}</p>
</section>

可使用下列位於範本旁的component.js檔案中的伺服器端JavaScript來編寫對應的邏輯：

use(function () {
    var Constants = {
        DESCRIPTION_PROP: "jcr:description",
        DESCRIPTION_LENGTH: 50
    };

    var title = currentPage.getNavigationTitle() || currentPage.getTitle() || currentPage.getName();
    var description = properties.get(Constants.DESCRIPTION_PROP, "").substr(0, Constants.DESCRIPTION_LENGTH);

    return {
        title: title,
        description: description
    };
});

這會嘗試從不同的來源取用title，並將說明裁切為50個字元。

相依關係

假設我們有一個公用程式類別，它已配備智慧功能，例如導覽標題的預設邏輯，或將字串精心剪下至特定長度：

use(['../utils/MyUtils.js'], function (utils) {
    var Constants = {
        DESCRIPTION_PROP: "jcr:description",
        DESCRIPTION_LENGTH: 50
    };

    var title = utils.getNavigationTitle(currentPage);
    var description = properties.get(Constants.DESCRIPTION_PROP, "").substr(0, Constants.DESCRIPTION_LENGTH);

    return {
        title: title,
        description: description
    };
});

擴展

依賴性模式也可用來擴充其他元件的邏輯（通常是目前元件的sling:resourceSuperType）。

假設父元件已提供title，我們也要添加description:

use(['../parent-component/parent-component.js'], function (component) {
    var Constants = {
        DESCRIPTION_PROP: "jcr:description",
        DESCRIPTION_LENGTH: 50
    };

    component.description = utils.shortenString(properties.get(Constants.DESCRIPTION_PROP, ""), Constants.DESCRIPTION_LENGTH);

    return component;
});

將參數傳遞至範本

在data-sly-template陳述式中，如果陳述式可獨立於元件，則將參數傳遞至相關的Use-API會很有用。

因此，在我們的元件中，讓我們呼叫位於不同檔案中的範本：

<section class="component-name" data-sly-use.tmpl="template.html" data-sly-call="${tmpl.templateName @ page=currentPage}"></section>

這就是位於template.html的範本：

<template data-sly-template.templateName="${@ page}" data-sly-use.tmpl="${'template.js' @ page=page, descriptionLength=50}">
    <h1>${tmpl.title}</h1>
    <p>${tmpl.description}</p>
</template>

對應的邏輯可以使用下列伺服器端JavaScript來寫入，位於範本檔案旁的template.js檔案中：

use(function () {
    var Constants = {
        DESCRIPTION_PROP: "jcr:description"
    };

    var title = this.page.getNavigationTitle() || this.page.getTitle() || this.page.getName();
    var description = this.page.getProperties().get(Constants.DESCRIPTION_PROP, "").substr(0, this.descriptionLength);

    return {
        title: title,
        description: description
    };
});

傳遞的參數會設定在this關鍵字上。

本頁內容