SCF Handlebars Helpers scf-handlebars-helpers

Handlebars Helpers (ayudantes) son métodos a los que se puede llamar desde scripts Handlebars para facilitar el trabajo con componentes SCF.

La implementación incluye una definición del lado del cliente y del lado del servidor. También es posible que los desarrolladores creen ayudantes personalizados.

Los ayudantes personalizados de SCF que se entregan con AEM Communities se definen en la variable biblioteca de cliente:

Abreviar abbreviate

Un ayudante para devolver una cadena abreviada que se ajuste a las propiedades maxWords y maxLength .

La cadena que se va a abreviar se proporciona como contexto. Si no se proporciona ningún contexto, se devuelve una cadena vacía.

En primer lugar, el contexto se recorta a maxLength y, a continuación, el contexto se divide en palabras y se reduce a maxWords.

Si safeString se establece en true, la cadena devuelta es SafeString.

Parámetros parameters

Ejemplos examples

{{abbreviate subject maxWords=2}}

/*
If subject =
    "AEM Communities - Site Creation Wizard"

Then abbreviate would return
    "AEM Communities".
*/

{{{abbreviate message safeString=true maxLength=30}}}

/*
If message =
    "The goal of AEM Communities is to quickly create a community engagement site."

Then abbreviate would return
    "The goal of AEM Communities is"
*/

Content-loadmore content-loadmore

Un ayudante a añadir dos espacios bajo un div, uno para el texto completo y el otro para el menos texto, con la capacidad de alternar entre las dos vistas.

Parámetros parameters-1

Ejemplo example

{{content-loadmore  context numChars=32  moreText="go on"  ellipsesText="..." }}

/*
If context =
    "Here is the initial less content and this is more content."

Then content-loadmore would return
    "Here is the initial less content<span class="moreelipses">...</span> <span class="scf-morecontent"><span>and this is more content.</span>  <a href="" class="scf-morelink" evt="click=toggleContent">go on</a></span>"
*/

DateUtil dateutil

Un ayudante para devolver una cadena de fecha con formato.

Parámetros parameters-2

Ejemplos examples-1

{{dateUtil this.memberSince format="dd MMM yyyy, hh:mm"}}

// returns "18 Mar 2015, 18:17"

{{dateUtil this.birthday format="MM-DD-YYYY"}}

// returns "03-18-2015"

Es igual a equals

Un ayudante a devolver contenido en función de una condición de igualdad.

Parámetros parameters-3

Ejemplo example-1

{{#equals  value "some-value"}}
  <div>They are EQUAL!</div>
{{else}}
  <div>They are NOT equal!</div>
{{/equals}}

If-wcm-mode if-wcm-mode

Un asistente de bloque que prueba el valor actual de Modo WCM con una lista de modos separados por cadenas.

Parámetros parameters-4

Ejemplo example-2

{{#if-wcm-mode mode="DESIGN, EDIT"}}
 ...
{{else}}
 ...
{{/if-wcm-mode}}

i18n i-n

Este ayudante anula el Handlebars Helper 'i18n'.

Consulte también Internacionalización de cadenas en código JavaScript.

Parámetros parameters-5

Ejemplo example-3

{{i18n "hello"}}
{{i18n "hello" comment="greeting" default="bonjour"}}

Incluir include

Un ayudante para incluir un componente como recurso no existente en una plantilla.

Esto permite que el recurso se personalice mediante programación con más facilidad de lo que es posible para un recurso añadido como nodo JCR. Consulte Agregar o incluir un componente de comunidades.

Solo se pueden incluir algunos componentes de Communities. Para AEM 6.1, los que son inclusibles son comentarios, clasificación, revisionesy votar.

Este asistente, apropiado solo en el lado del servidor, proporciona una funcionalidad similar a cq:include para secuencias de comandos JSP.

Parámetros parameters-6

Ejemplo example-4

{{include this.id path="comments" resourceType="social/commons/components/hbs/comments"}}

Esto incluirá un nuevo componente de comentarios en this.id + /comments

IncludeClientLib includeclientlib

Un asistente que incluye una biblioteca de cliente html AEM, que puede ser un js, un css o una biblioteca de temas. Para varias inclusiones de diferentes tipos, por ejemplo js y css, esta etiqueta debe utilizarse varias veces en el script Handlebars.

Este asistente, apropiado solo en el lado del servidor, proporciona una funcionalidad similar a ui:includeClientLib para secuencias de comandos JSP.

Parámetros parameters-7

Ejemplos examples-2

// all: js + theme (theme-js + css)
{{includeClientLib categories="cq.social.hbs.comments, cq.social.hbs.voting"}}

// returns
    <link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
    <link href="/etc/clientlibs/social/hbs/socialgraph.css" rel="stylesheet" type="text/css">
    <link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">
    <script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
    <script src="/etc/clientlibs/social/hbs/socialgraph.js" type="text/javascript"></script>
    <script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>

// only js libs
{{includeClientLib js="cq.social.hbs.comments, cq.social.hbs.voting"}}

// returns
    <script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
    <script src="/etc/clientlibs/social/hbs/socialgraph.js" type="text/javascript"></script>
    <script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>

// theme only (theme-js + css)
{{includeClientLib theme="cq.social.hbs.comments, cq.social.hbs.voting"}}

// returns
    <link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
    <link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">
    <script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
    <script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>

// css only
{{includeClientLib css="cq.social.hbs.comments, cq.social.hbs.voting"}}

// returns
    <link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
    <link href="/etc/clientlibs/social/hbs/socialgraph.css" rel="stylesheet" type="text/css">
    <link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">

Pretty-time pretty-time

Ayuda para mostrar cuánto tiempo ha pasado hasta un punto límite, después del cual se muestra un formato de fecha normal.

Por ejemplo:

Parámetros parameters-8

Ejemplo example-5

{{pretty-time this.published daysCutoff=7}}

/*
Depending on how long in the past, may return

  "3 minutes ago"

  "3 hours ago"

  "3 days ago"
*/

Xss-html xss-html

Ayuda que codifica una cadena de origen para el contenido del elemento HTML para ayudar a protegerse contra XSS.

NOTA: no es un validador y no se va a utilizar para escribir valores de atributo.

Parámetros parameters-9

Ejemplo example-6

<p>{{xss-html forum-ugc}}</p>

Xss-htmlAttr xss-htmlattr

Un ayudante que codifica una cadena de origen para escribir en un valor de atributo de HTML para ayudar a protegerse contra XSS.

NOTA: no es un validador y no se va a usar para escribir atributos procesables (href, src, controladores de eventos).

Parámetros parameters-10

Ejemplo example-7

<div id={{xss-htmlAttr id}} />

Xss-jsString xss-jsstring

Un ayudante que codifica una cadena de origen para escribir en contenido de cadena JavaScript para ayudar a protegerse contra XSS.

NOTA: no es un validador y no debe utilizarse para escribir en JavaScript arbitrario.

Parámetros parameters-11

Ejemplo example-8

var input = {{xss-jsString topic-title}}

Xss-validHref xss-validhref

Un ayudante que corrige una dirección URL para escribir como href HTML o valor de atributo srce para ayudar a protegerse contra XSS.

NOTA: esto puede devolver una cadena vacía

Parámetros parameters-12

Ejemplo example-9

<a href="{{xss-validHref url}}">my link</a>

Información general básica de Handlebars.js handlebars-js-basic-overview

Un ejemplo de ayuda sencilla de la documentación de Handlebars.js: an-example-of-a-simple-helper-from-handlebars-js-documentation

Handlebars.registerHelper('link_to', function(title, options) {
    return new Handlebars.SafeString('<a href="/posts' + this.url + '">' + title + "!</a>");
});

var context = {posts: [
    {url: "/hello-world",
      body: "Hello World!"}
  ] };

// when link_to is called, posts is the current context
var source = '<ul>{{#posts}}<li>{{{link_to "Post"}}}</li>{{/posts}}</ul>'

var template = Handlebars.compile(source);

template(context);

Renderizaría:

<ul>
<li><a href="/posts/hello-world">¡Publicación!</a></li>
</ul>

Ejemplo de un asistente de bloque de la documentación de Handlebars.js: an-example-of-a-block-helper-from-handlebars-js-documentation

Handlebars.registerHelper('link', function(options) {
    return new Handlebars.SafeString('<a href="/people/' + this.id + '">' + options.fn(this) + '</a>');
});

var data = { "people": [
  { "name": "Alan", "id": 1 },
  { "name": "Yehuda", "id": 2 }
]};

// when link is called, people is the current context
var source = "<ul>{{#people}}<li>{{#link}}{{name}}{{/link}}</li>{{/people}}</ul>";

var template = Handlebars.compile(source);

template(data);

Renderizaría:
<ul>
<li><a href="/people/1">Alan</a></li>
<li><a href="/people/2">Yehuda</a></li>
</ul>

Ayuda personalizada de SCF custom-scf-helpers

Los ayudantes personalizados deben implementarse en el lado del servidor y del cliente, especialmente al pasar datos. Para SCF, la mayoría de las plantillas se compilan y procesan en el servidor, ya que el servidor genera el HTML de un componente determinado cuando se solicita la página.

Ayudas personalizadas del lado del servidor server-side-custom-helpers

Para implementar y registrar un asistente personalizado de SCF en el lado del servidor, simplemente implemente la interfaz de Java TemplateHelper, hágalo Servicio OSGi e instálelo como parte de un paquete OSGi.

Por ejemplo:

FooTextHelper.java footexthelper-java

/** Custom Handlebars Helper */

package com.my.helpers;

import java.io.IOException;

import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;

import com.adobe.cq.social.handlebars.api.TemplateHelper;
import com.github.jknack.handlebars.Options;

@Service
@Component
public class FooTextHelper implements TemplateHelper<String>{

    @Override
    public CharSequence apply(String context, Options options) throws IOException {
        return "foo-" + context;
    }

    @Override
    public String getHelperName() {
        return "foo-text";
    }

    @Override
    public Class<String> getContextType() {
        return String.class;
    }
}

Ayudantes personalizados del lado del cliente client-side-custom-helpers

Los ayudantes del lado del cliente son secuencias de comandos Handlebars registradas invocando Handlebars.registerHelper().
Por ejemplo:

custom-helpers.js custom-helpers-js

function(Handlebars, SCF, $CQ) {

    Handlebars.registerHelper('foo-text', function(context, options) {
        if (!context) {
            return "";
        }
        return "foo-" + context;
    });

})(Handlebars, SCF, $CQ);

Los ayudantes personalizados del lado del cliente deben agregarse a una biblioteca de cliente personalizada.
La clientlib debe:

Nota: los ayudantes de SCF se definen en /etc/clientlibs/social/commons/scf/helpers.js.