Show Menu
THEMEN×

HTL-JavaScript-Anwendungs-API

Die HTML Template Language (HTL) JavaScript Use-API ermöglicht es einer HTML-Datei, auf in JavaScript geschriebenen Helfercode zuzugreifen. Dadurch kann die gesamte komplexe Geschäftslogik im JavaScript-Code verkapselt werden, während der HTL-Code nur die direkte Markup-Produktion verarbeiten muss.
Die folgenden Konventionen werden verwendet.
/**
 * 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 () {}
    }
});

Ein einfaches Beispiel

Wir definieren eine Komponente, info , unter
/apps/my-example/components/info
Sie enthält zwei Dateien:
  • info.js : Eine die Anwendungsklasse definierende JavaScript-Datei.
  • info.html : Eine die Komponente info definierende HTL-Datei. Dieser Code verwendet die Funktionalität von info.js durch die Anwendungs-API.

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

Zudem erstellen wir einen Inhaltsknoten, der die Komponente info verwendet unter
/content/my-example mit Eigenschaften:
  • sling:resourceType = "my-example/component/info"
  • title = "My Example"
  • description = "This is some example content."
Hier die daraus resultierende Repository-Struktur:

Repository-Struktur

{
  "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."
    }
  }
}

Beachten Sie die folgende Komponentenvorlage:
<section class="component-name" data-sly-use.component="component.js">
    <h1>${component.title}</h1>
    <p>${component.description}</p>
</section>

Die entsprechende Logik kann mithilfe des folgenden serverseitigen JavaScript-Elements geschrieben werden, das sich in der Datei component.js direkt neben der Vorlage befindet.
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
    };
});

Hier wird versucht, den title aus verschiedenen Quellen zu übernehmen und die Beschreibung auf 50 Zeichen zuzuschneiden.

Abhängigkeiten

Angenommen, wir verfügen über eine Dienstprogrammklasse, die bereits mit intelligenten Funktionen ausgestattet ist, beispielsweise mit der Standardlogik für den Navigationstitel oder den angemessenen Zuschnitt einer Zeichenfolge auf eine bestimmte Länge:
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
    };
});

Erweitern

Das Abhängigkeitsmuster kann auch verwendet werden, um die Logik einer anderen Komponente zu erweitern (für gewöhnlich ist dies der sling:resourceSuperType der aktuellen Komponente).
Angenommen, die übergeordnete Komponente stellt den title bereit und wir möchten zudem eine description hinzufügen:
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;
});

Weitergeben von Parametern an eine Vorlage

Falls data-sly-template -Anweisungen unabhängig von Komponenten sein können, kann es sinnvoll sein, Parameter an die verknüpfte Anwendungs-API weiterzugeben.
In unserer Komponente rufen wir also eine Vorlage auf, die sich in einer anderen Datei befindet:
<section class="component-name" data-sly-use.tmpl="template.html" data-sly-call="${tmpl.templateName @ page=currentPage}"></section>

Anschließend ist dies die in der Datei template.html befindliche Vorlage:
<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>

Die entsprechende Logik kann mithilfe des folgenden serverseitigen Java-Script-Elements geschrieben werden, das sich in der Datei template.js direkt neben der Vorlagendatei befindet:
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
    };
});

Die weitergegebenen Parameter werden im Keyword this festgelegt.