La API de uso de JavaScript de lenguaje de plantilla HTML (HTL) permite que un archivo HTL acceda al código de ayuda escrito en JavaScript. Esto permite encapsular toda la lógica empresarial compleja en el código JavaScript, mientras que el código HTL solo trata la producción de marcado directo.
Se utilizan las siguientes convenciones.
/**
* 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 () {}
}
});
Definimos un componente, info
, ubicado en
/apps/my-example/components/info
Contiene dos archivos:
info.js
: un archivo JavaScript que define la clase de uso.info.html
: un archivo HTL que define el componente info
. Este código utilizará la funcionalidad de info.js
a través de la API de uso."use strict";
use(function () {
var info = {};
info.title = resource.properties["title"];
info.description = resource.properties["description"];
return info;
});
<div data-sly-use.info="info.js">
<h1>${info.title}</h1>
<p>${info.description}</p>
</div>
También creamos un nodo de contenido que utiliza el componente info
en
/content/my-example
, con propiedades:
sling:resourceType = "my-example/component/info"
title = "My Example"
description = "This is some example content."
Esta es la estructura del repositorio resultante:
{
"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."
}
}
}
Tenga en cuenta la siguiente plantilla de componente:
<section class="component-name" data-sly-use.component="component.js">
<h1>${component.title}</h1>
<p>${component.description}</p>
</section>
La lógica correspondiente se puede escribir utilizando el siguiente JavaScript del lado del servidor, ubicado en un archivo component.js
justo al lado de la plantilla:
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
};
});
Esto intenta tomar el title
de diferentes fuentes y recorta la descripción a 50 caracteres.
Imaginemos que tenemos una clase de utilidad que ya está equipada con funciones inteligentes, como la lógica predeterminada para el título de navegación o cortando una cadena a una longitud determinada:
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
};
});
El patrón de dependencia también se puede utilizar para ampliar la lógica de otro componente (que suele ser sling:resourceSuperType
del componente actual).
Imagine que el componente principal ya proporciona el title
y que también queremos agregar un 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;
});
En el caso de las instrucciones data-sly-template
que pueden ser independientes de los componentes, puede resultar útil pasar parámetros a la API de uso asociada.
Por lo tanto, en nuestro componente vamos a llamar a una plantilla que se encuentra en un archivo diferente:
<section class="component-name" data-sly-use.tmpl="template.html" data-sly-call="${tmpl.templateName @ page=currentPage}"></section>
A continuación, esta es la plantilla ubicada en 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>
La lógica correspondiente se puede escribir utilizando el siguiente JavaScript del lado del servidor, ubicado en un archivo template.js
justo al lado del archivo de plantilla:
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
};
});
Los parámetros pasados se establecen en la palabra clave this
.