Show Menu
TÓPICOS×

API de uso do JavaScript do HTL

A HTML Template Language (HTL) JavaScript Use-API permite que um arquivo HTL acesse o código auxiliar escrito em JavaScript. Isso permite que toda a lógica comercial complexa seja encapsulada no código JavaScript, enquanto o código HTL trata somente da produção de marcação direta.
As seguintes convenções são usadas.
/**
 * 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 () {}
    }
});

Um exemplo simples

Definimos um componente, info , localizado em
/apps/my-example/components/info
Ele contém dois arquivos:
  • info.js : um arquivo JavaScript que define a classe de uso.
  • info.html : um arquivo HTL que define o componente info . Esse código usará a funcionalidade do por meio info.js da API de uso.

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

Também criamos um nó de conteúdo que usa o info componente em
/content/my-example , com propriedades:
  • sling:resourceType = "my-example/component/info"
  • title = "My Example"
  • description = "This is some example content."
Esta é a estrutura do repositório resultante:

Estrutura do repositório

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

Considere o seguinte modelo de componente:
<section class="component-name" data-sly-use.component="component.js">
    <h1>${component.title}</h1>
    <p>${component.description}</p>
</section>

A lógica correspondente pode ser gravada usando o seguinte JavaScript do lado do servidor, localizado em um component.js arquivo ao lado do modelo:
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
    };
});

Isso tenta extrair a descrição title de fontes diferentes e corta a descrição para 50 caracteres.

Dependências

Vamos imaginar que nós tenhamos uma classe de utilidade que já está equipada com recursos inteligentes, como a lógica padrão para o título de navegação ou recortar uma sequência de caracteres com um certo comprimento:
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
    };
});

Extensão

O padrão de dependência também pode ser usado para estender a lógica de outro componente (que normalmente é o sling:resourceSuperType do componente atual).
Imagine que o componente pai já fornece o title , e nós também queremos adicionar um 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;
});

Passando parâmetros para um modelo

No caso de data-sly-template declarações que podem ser independentes dos componentes, pode ser útil passar parâmetros para a Use-API associada.
Então, em nosso componente vamos chamar um modelo que está localizado em um arquivo diferente:
<section class="component-name" data-sly-use.tmpl="template.html" data-sly-call="${tmpl.templateName @ page=currentPage}"></section>

Esse é o modelo localizado em 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>

A lógica correspondente pode ser gravada usando o seguinte JavaScript do lado do servidor, localizado em um template.js arquivo ao lado do arquivo de modelo:
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
    };
});

Os parâmetros passados são definidos na this palavra-chave.