Show Menu
THEMEN×

SCF Handlebars Helfers

Handlebars Helpers (Helpers) sind Methoden, die von Handlebars-Skripten aufgerufen werden können, um die Arbeit mit SCF-Komponenten zu erleichtern.
Die Implementierung umfasst eine clientseitige und eine serverseitige Definition. Entwickler können auch benutzerdefinierte Helfer erstellen.
Die mit AEM Communities gelieferten benutzerdefinierten SCF-Helfer werden in der Client-Bibliothek definiert:
  • /etc/clientlibs/social/commons/scf/helpers.js
Installieren Sie unbedingt das neueste Communities Feature Pack .

Abkürzung

Ein Helfer, der eine abgekürzte Zeichenfolge zurückgibt, die den Eigenschaften maxWords und maxLength entspricht.
Die abzukürzende Zeichenfolge wird als Kontext bereitgestellt. Wenn kein Kontext angegeben ist, wird eine leere Zeichenfolge zurückgegeben.
Zuerst wird der Kontext auf maxLength zugeschnitten, dann wird der Kontext in Wörter unterteilt und auf maxWords reduziert.
Wenn safeString auf true festgelegt ist, ist die zurückgegebene Zeichenfolge ein SafeString.

Parameter

  • context : Zeichenfolge
    (Optional) Die Standardeinstellung ist eine leere Zeichenfolge
  • maxLength : Nummer
    (Optional) Der Standardwert ist die Länge des Kontexts.
  • maxWords : Nummer
    (Optional) Die Standardeinstellung ist die Anzahl der Wörter in der zugeschnittenen Zeichenfolge.
  • safeString : Boolesch
    (Optional) Gibt einen Handlebars.SafeString() zurück, wenn true. Der Standardwert lautet false.

Beispiele

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

Ein Helfer, um zwei Bereiche unter einem div hinzuzufügen, einer für den Volltext und der andere für den less-Text, mit der Möglichkeit, zwischen den beiden Ansichten umzuschalten.

Parameter

  • context : Zeichenfolge
    (Optional) Der Standardwert ist die leere Zeichenfolge.
  • numChars : Nummer
    (Optional) Die Anzahl der Zeichen, die angezeigt werden, wenn kein Volltext angezeigt wird. Der Standardwert ist 100.
  • moreText : Zeichenfolge
    (Optional) Der anzuzeigende Text, der angibt, dass mehr Text angezeigt werden soll. Der Standardwert ist "mehr".
  • ellipsesText : Zeichenfolge
    (Optional) Der anzuzeigende Text, der angibt, dass ausgeblendeter Text vorhanden ist. Der Standardwert ist "...".
  • safeString : Boolesch
    (Optional) Ein boolescher Wert, der angibt, ob Handlebars.SafeString() angewendet werden soll, bevor das Ergebnis zurückgegeben wird. Der Standardwert lautet false.

Beispiel

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

Ein Helfer zum Zurückgeben einer formatierten Datums-Zeichenfolge.

Parameter

  • context : Nummer
    (Optional) ein Millisekunden-Wertversatz vom 1. Januar 1970 (Epoche). Der Standardwert ist das aktuelle Datum.
  • format : Zeichenfolge
    (Optional) Das anzuwendende Datumsformat. Der Standardwert ist "YYYY-MM-DDTHH:mm:ss.sssZ"und das Ergebnis wird als "2015-03-18T18:17:13-07:00"angezeigt.

Beispiele

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

Equals

Ein Helfer zum Zurückgeben von Inhalten, abhängig von einer Gleichheitsbedingung.

Parameter

  • lvalue : Zeichenfolge
    Der zu vergleichende linke Wert.
  • rvalue : Zeichenfolge
    Der zu vergleichende rechte Wert.

Beispiel

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

If-wcm-mode

Ein Blockhelfer, der den aktuellen Wert des WCM-Modus mit einer durch eine Zeichenfolge getrennten Liste von Modi testet.

Parameter

  • context : Zeichenfolge
    (Optional) Die zu übersetzende Zeichenfolge. Erforderlich, wenn kein Standardwert angegeben wurde.
  • Modus : Zeichenfolge
    (Optional) Eine kommagetrennte Liste der WCM-Modi , die getestet werden soll, falls festgelegt.

Beispiel

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

i18n

Dieser Helfer setzt den Handlebars Helper 'i18n' außer Kraft.

Parameter

  • context : Zeichenfolge
    (Optional) Die zu übersetzende Zeichenfolge. Erforderlich, wenn kein Standardwert angegeben wurde.
  • Standard : Zeichenfolge
    (Optional) Die zu übersetzende Standardzeichenfolge. Erforderlich, wenn kein Kontext angegeben wurde.
  • Kommentar : Zeichenfolge
    (Optional) Ein Übersetzungshinweis

Beispiel

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

Einbeziehen

Ein Helfer zum Einbeziehen einer Komponente als nicht vorhandene Ressource in eine Vorlage.
Dadurch kann die Ressource programmgesteuert einfacher angepasst werden, als es für eine Ressource möglich ist, die als JCR-Knoten hinzugefügt wird. Siehe Hinzufügen oder Einbeziehen einer Communities-Komponente .
Es sind nur einige ausgewählte Communities-Komponenten inklusive. Für AEM 6.1 sind die inklusiven Kommentare , Ratings , Reviews und Abstimmungen .
Dieser Helfer, der nur serverseitig geeignet ist, bietet Funktionen, die cq:include für JSP-Skripte ähneln.

Parameter

  • context : Zeichenfolge oder Objekt
    (Optional, sofern kein relativer Pfad angegeben wird)
    Verwenden Sie diese Option, this um den aktuellen Kontext weiterzugeben.
    Verwenden Sie this.id zum Abrufen der Ressource id zum Rendern des angeforderten resourceType-Objekts.
  • resourceType : Zeichenfolge
    (Optional) Der Ressourcentyp wird standardmäßig vom Kontext zum Ressourcentyp gewählt.
  • template : Zeichenfolge
    Pfad zum Komponentenskript.
  • path : Zeichenfolge
    (Erforderlich) Der Pfad zur Ressource. Wenn der Pfad relativ ist, muss ein Kontext angegeben werden. Andernfalls wird die leere Zeichenfolge zurückgegeben.
  • authoringDisabled : Boolesch
    (Optional) Der Standardwert ist "false". Nur zur internen Verwendung.

Beispiel

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

Dies beinhaltet eine neue Kommentarkomponente unter this.id + /comments.

IncludeClientLib

Ein Helfer mit einer AEM HTML-Client-Bibliothek, bei der es sich um eine JS-, CSS- oder Designbibliothek handeln kann. Für mehrere Inklusionen verschiedener Typen, z. B. js und css, muss dieses Tag im Handlebars-Skript mehrmals verwendet werden.
Dieser Helfer, der nur serverseitig geeignet ist, bietet Funktionen, die ui:includeClientLib für JSP-Skripten ähneln.

Parameter

  • Kategorien : Zeichenfolge
    (Optional) Eine Liste kommagetrennter Client-Lib-Kategorien. Dies bezieht alle Javascript-Dateien und CSS-Bibliotheken für die betreffenden Kategorien mit ein. Der Designname wird aus der Abfrage extrahiert.
  • Thema : Zeichenfolge
    (Optional) Eine Liste kommagetrennter Client-Lib-Kategorien. Dies beinhaltet alle designbezogenen Bibliotheken (CSS und JS) für die entsprechenden Kategorien. Der Designname wird aus der Abfrage extrahiert.
  • js : Zeichenfolge
    (Optional) Eine Liste kommagetrennter Client-Lib-Kategorien. Dies bezieht alle Javascript-Bibliotheken für die betreffenden Kategorien mit ein.
  • css : Zeichenfolge
    (Optional) Eine Liste kommagetrennter Client-Lib-Kategorien. Dies bezieht alle CSS-Bibliotheken für die betreffenden Kategorien mit ein.

Beispiele

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

PrettyTime

Ein Helfer, der anzeigt, wie viel Zeit bis zu einem Cutoff-Punkt vergangen ist, nach dem ein reguläres Datumsformat angezeigt wird.
Beispiel:
  • Vor 12 Stunden
  • Vor 7 Tagen

Parameter

  • context : Nummer
    Eine Zeit in der Vergangenheit, die mit "jetzt" zu vergleichen ist. Die Zeit wird als Millisekunden-Wertversatz ab dem 1. Januar 1970 (Epoche) ausgedrückt.
  • daysCutoff : Nummer
    Die Anzahl der Tage vor dem Wechsel zu einem tatsächlichen Datum. Der Standardwert ist 60.

Beispiel

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

Ein Helfer, der eine Quellzeichenfolge für HTML-Elementinhalte kodiert, um den Schutz vor XSS zu unterstützen.
HINWEIS: dies ist kein Validator und soll nicht zum Schreiben von Attributwerten verwendet werden.

Parameter

  • context : object
    Der zu kodierende HTML.

Beispiel

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

Xss-htmlAttr

Ein Helfer, der eine Quellzeichenfolge für das Schreiben in einen HTML-Attributwert kodiert, um XSS abzuwehren.
HINWEIS: dies ist kein Validator und ist nicht zum Schreiben von mit Aktionen versehenen Attributen (href, src, Ereignis Handler) zu verwenden.

Parameter

  • context : Objekt
    Der zu kodierende HTML.

Beispiel

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

Xss-jsString

Ein Helfer, der eine Quellzeichenfolge für das Schreiben in JavaScript-Zeichenfolgeninhalt kodiert, um XSS zu schützen.
HINWEIS: dies ist kein Validator und ist nicht zum Schreiben in beliebiges JavaScript zu verwenden.

Parameter

  • context : Objekt
    Der zu kodierende HTML.

Beispiel

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

Xss-validHref

Ein Helfer, der eine URL für das Schreiben als HTML-href- oder -srce-Attributwert anerkennt, um XSS zu schützen.
HINWEIS: kann eine leere Zeichenfolge zurückgeben

Parameter

  • context : Objekt
    Die zu bereinigende URL.

Beispiel

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

Übersicht über Handlebars.js

Eine kurze Übersicht über Hilfsfunktionen aus der Handlebars.js-Dokumentation :
  • Ein Handlebars Helper-Aufruf ist ein einfacher Bezeichner (der Name des Helfers), gefolgt von einem oder mehreren durch Leerzeichen getrennten Parametern.
  • Parameter können ein einfaches String-, number-, boolean- oder JSON-Objekt sowie eine optionale Sequenz von Schlüssel-Wert-Paaren (Hash-Argumente) als letzte Parameter sein.
  • Die Schlüssel in Hashargumenten müssen einfache Bezeichner sein.
  • Die Werte in den Hash-Argumenten sind Handlebars-Ausdruck: einfache Bezeichner, Pfade oder Zeichenfolgen.
  • Der aktuelle Kontext steht this immer Handlebars Helfern zur Verfügung.
  • Der Kontext kann ein String-, number-, boolean- oder JSON-Datenobjekt sein.
  • Es ist möglich, ein im aktuellen Kontext verschachteltes Objekt als Kontext zu übergeben, z. B. this.url oder this.id (siehe folgende Beispiele von einfachen und Blockhelfern).
  • Blockhelfer sind Funktionen, die von jeder beliebigen Stelle in der Vorlage aufgerufen werden können. Sie können einen Vorlagenblock jedes Mal mit einem anderen Kontext null oder mehrmals aufrufen. Sie enthalten einen Kontext zwischen { und {{/ name }.
  • Handlebars bietet einen endgültigen Parameter für Helfer namens 'options'. Das Sonderobjekt 'options' enthält
    • Optionale private Daten (options.data)
    • Optionale Eigenschaften von Schlüsselwerten aus dem Aufruf (options.hash)
    • Möglichkeit zum Aufrufen selbst (options.fn())
    • Möglichkeit zum Aufrufen des Umkehrs (options.inverse())
  • Es wird empfohlen, dass der von einem Helfer zurückgegebene HTML-String-Inhalt eine SafeString-Zeichenfolge ist.

Ein Beispiel für einen einfachen Helfer aus der Handlebars.js-Dokumentation:

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);

Rendering:
<ul><li><a href="/beiträge/hello-world">Posten!</a></li></ul>

Beispiel eines Blockhelpers aus der Dokumentation zu Handlebars.js:

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);

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

Benutzerdefinierte SCF-Helfer

Benutzerspezifische Helfer müssen auf der Server- und Clientseite implementiert werden, besonders bei der Datenübergabe. Bei SCF werden die meisten Vorlagen serverseitig kompiliert und gerendert, während der Server das HTML für eine bestimmte Komponente generiert, wenn die Seite angefordert wird.

Benutzerdefinierte Helfer auf Serverseite

Um einen benutzerdefinierten SCF-Helfer auf der Serverseite zu implementieren und zu registrieren, implementieren Sie einfach die Java-Schnittstelle TemplateHelper , erstellen Sie einen OSGi-Dienst und installieren Sie sie als Teil eines OSGi-Bundles.
Beispiel:

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;
    }
}

Für die clientseitige Erstellung muss auch ein Helfer erstellt werden.
Die Komponente wird für den angemeldeten Benutzer clientseitig wiedergegeben. Wenn der clientseitige Helfer nicht gefunden wird, wird die Komponente ausgeblendet.

Benutzerspezifische Helfer auf Clientseite

Die clientseitigen Helfer sind Handlebars-Skripte, die durch Aufrufen registriert werden Handlebars.registerHelper() . Beispiel:

custom-helpers.js

function(Handlebars, SCF, $CQ) {

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

})(Handlebars, SCF, $CQ);

Die benutzerdefinierten clientseitigen Helfer müssen einer benutzerdefinierten Client-Bibliothek hinzugefügt werden. clientlib muss:
  • Abhängigkeiten einschließen cq.social.scf .
  • Laden nach dem Laden der Handlebars.
Hinweis: Die SCF-Helfer werden in /etc/clientlibs/social/commons/scf/helpers.js .