SCF Handlebars Helpers

Essentiële ⇐ Aanpassing aan server-side bezig jj.
Aanpassing aan clientzijde☐

Handlebars Helpers (helpers) zijn methodes callable van de manuscripten van Handlebars om het werken met componenten te vergemakkelijken SCF.

De implementatie omvat een client-side en een server-side definitie. Ontwikkelaars kunnen ook aangepaste hulplijnen maken.

De aangepaste SCF-helpers die bij AEM Communities worden geleverd, worden gedefinieerd in de clientbibliotheek:

  • /etc/clientlibs/social/commons/scf/helpers.js
OPMERKING

Afkorting

Een helper om een afgekorte tekenreeks te retourneren die voldoet aan de eigenschappen maxWords en maxLength.

De tekenreeks die moet worden afgekort, wordt opgegeven als de context. Als er geen context is opgegeven, wordt een lege tekenreeks geretourneerd.

Eerst wordt de context bijgesneden tot maxLength en vervolgens wordt de context in woorden gesegmenteerd en tot maxWords teruggebracht.

Als safeString is ingesteld op true, is de geretourneerde tekenreeks een SafeString.

Parameters

  • context: String

    (optioneel) Standaard is de lege tekenreeks

  • maxLength: Getal

    (optioneel) Standaard is de lengte van de context.

  • maxWords: Getal

    (optioneel) De standaardwaarde is het aantal woorden in de bijgesneden tekenreeks.

  • safeString: Boolean

    (optioneel) Retourneert een Handlebars.SafeString(), indien true. De standaardwaarde is false.

Voorbeelden

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

Inhoud laden

Een hulpmiddel om twee reeksen onder een div toe te voegen, één voor de volledige tekst en andere voor minder tekst, met de capaciteit om tussen de twee meningen van een knevel te voorzien.

Parameters

  • context: String

    (optioneel) Standaard is de lege tekenreeks.

  • numChars: Getal

    (optioneel) Het aantal tekens dat moet worden weergegeven wanneer geen volledige tekst wordt weergegeven. De standaardwaarde is 100.

  • moreText: String

    (optioneel) De tekst die moet worden weergegeven om aan te geven dat er meer tekst moet worden weergegeven. Standaard is "meer".

  • ellipsesText: String

    (optioneel) De tekst die moet worden weergegeven om aan te geven dat er verborgen tekst is. Standaard is "…".

  • safeString: Boolean

    (optioneel) Booleaanse waarde die aangeeft of Handlebars.SafeString() al dan niet moet worden toegepast voordat het resultaat wordt geretourneerd. De standaardwaarde is false.

Voorbeeld

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

Een hulpmiddel om een geformatteerde datumreeks terug te keren.

Parameters

  • context: Getal

    (optioneel) Een millisecondenverschuiving vanaf 1 januari 1970 (tijdperk). De standaardwaarde is de huidige datum.

  • indeling: String

    (optioneel) De datumnotatie die moet worden toegepast. Standaard is "YYYY-MM-DDTHH:mm:ss.sssZ" en het resultaat wordt weergegeven als "2015-03-18T18:17:13-07:00"

Voorbeelden

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

Gelijk

Een hulpmiddel om inhoud terug te keren afhankelijk van een voorwaardelijk gelijk aan.

Parameters

  • lvalue: String

    De linkerwaarde die moet worden vergeleken

  • waarde: String

    De rechterwaarde die moet worden vergeleken

Voorbeeld

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

If-wcm-mode

Een blokhelper die de huidige waarde van WCM wijze tegen een koord gescheiden lijst van wijzen test.

Parameters

  • context: String

    (optioneel) De tekenreeks die moet worden vertaald. Vereist als er geen standaard is opgegeven.

  • modus: String

    (optioneel) Een door komma's gescheiden lijst met WCM-modi om te testen of deze zijn ingesteld.

Voorbeeld

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

i18n

Deze hulp treedt helper "i18n"van Handlebars met voeten.

Zie ook Tekenreeksen internationaliseren in JavaScript Code.

Parameters

  • context: String

    (optioneel) De tekenreeks die moet worden vertaald. Vereist als er geen standaard is opgegeven.

  • standaard: String

    (optioneel) De standaardtekenreeks die moet worden omgezet. Vereist als er geen context is opgegeven.

  • opmerking: String

    (optioneel) Een vertaaltip

Voorbeeld

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

Opnemen

Een hulpmiddel om een component als niet bestaand middel in een malplaatje te omvatten.

Hierdoor kan de bron beter programmatisch worden aangepast dan mogelijk is voor een bron die als JCR-knooppunt wordt toegevoegd. Zie Een Community-component toevoegen of opnemen.

Slechts een paar communautaire componenten zijn inbegrepen. Voor AEM 6.1 zijn de meegeleverde opmerkingen comments, rating, reviews en stemden.

Deze hulp, die slechts op de server-kant aangewezen is, verstrekt functionaliteit gelijkend op cq:include voor manuscripten JSP.

Parameters

  • context: Tekenreeks of object

    (optioneel, tenzij een relatief pad wordt opgegeven)

    gebruik thisom de huidige context door te geven

    gebruik this.id om de bron op id te verkrijgen voor het renderen van het gevraagde resourceType

  • resourceType: String

    (facultatief) middeltype zal aan middeltype van context in gebreke blijven

  • sjabloon: String

    pad naar componentscript

  • pad: String

    (vereist) Het pad naar de bron. Als het pad relatief is, moet een context worden opgegeven, anders wordt de lege tekenreeks geretourneerd.

  • authoringDisabled: Boolean

    (optioneel) Standaard is false. Uitsluitend voor intern gebruik.

Voorbeeld

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

Dit omvat een nieuwe commentaarcomponent op this.id + /comments

IncludeClientLib

Een helper die een AEM HTML- cliëntbibliotheek omvat, die een js, een css of een themabibliotheek kan zijn. Voor meerdere inclusies van verschillende typen, bijvoorbeeld js en css, moet deze tag meerdere keren worden gebruikt in het Handlebars-script.

Deze hulp, die slechts op de server-kant aangewezen is, verstrekt functionaliteit gelijkend op ui:includeClientLib voor manuscripten JSP.

Parameters

  • categorieën: String

    (optioneel) Een lijst met door komma's gescheiden clientbibliotheekcategorieën. Dit omvat alle JavaScript- en CSS-bibliotheken voor de opgegeven categorieën. De themanaam wordt uit de aanvraag geëxtraheerd.

  • thema: String

    (optioneel) Een lijst met door komma's gescheiden clientbibliotheekcategorieën. Dit omvat alle themabibliotheken (zowel CSS als JS) voor de opgegeven categorieën. De themanaam wordt uit de aanvraag geëxtraheerd.

  • js: String

    (optioneel) Een lijst met door komma's gescheiden clientbibliotheekcategorieën. Dit omvat alle bibliotheken Javascript voor de bepaalde categorieën.

  • css: String

    (optioneel) Een lijst met door komma's gescheiden clientbibliotheekcategorieën. Dit omvat alle CSS-bibliotheken voor de opgegeven categorieën.

Voorbeelden

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

Nochtans

Een hulpmiddel om te tonen hoeveel tijd tot een afbreekpunt is overgegaan, waarna een regelmatige datumformaat wordt getoond.

Bijvoorbeeld:

  • 12 uur geleden
  • 7 dagen geleden

Parameters

  • context: Getal

    Een tijd in het verleden om te vergelijken met "nu". Tijd wordt uitgedrukt als een millisecondenverschuiving vanaf 1 januari 1970 (tijdperk).

  • daysCutoff: Getal

    Het aantal dagen geleden voordat wordt overgeschakeld op een werkelijke datum. De standaardwaarde is 60.

Voorbeeld

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

Een hulpmiddel dat een bronkoord voor de elementeninhoud van HTML codeert helpen tegen XSS.

OPMERKING: Dit is geen validator en moet niet worden gebruikt voor het schrijven van kenmerkwaarden.

Parameters

  • context: object

    de te coderen HTML

Voorbeeld

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

Xss-htmlAttr

Een hulpmiddel dat een bronkoord codeert voor het schrijven aan een de attributenwaarde van HTML helpen tegen XSS beschermen.

OPMERKING: dit is geen validator en moet niet worden gebruikt voor het schrijven van actionable attributen (href, src, gebeurtenismanagers).

Parameters

  • context: Object

    De te coderen HTML

Voorbeeld

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

Xss-jsString

Een hulpmiddel dat een bronkoord codeert voor het schrijven aan JavaScript koordinhoud helpen tegen XSS beschermen.

OPMERKING: Dit is geen validator en mag niet worden gebruikt voor het schrijven naar willekeurig JavaScript.

Parameters

  • context: Object

    De te coderen HTML

Voorbeeld

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

Xss-validHref

Een helper die een URL ontsmetten voor het schrijven als href van HTML of srce attributenwaarde helpen tegen XSS.

OPMERKING: dit kan een lege tekenreeks retourneren

Parameters

  • context: Object

    De URL die moet worden ontsmet

Voorbeeld

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

Handlebars.js Basic - Overzicht

  • Een hulpvraag van Handlebars is een eenvoudig herkenningsteken (*name *of helper), die door nul of meer ruimte-gescheiden parameters wordt gevolgd.

  • Parameters kunnen een eenvoudig String-, Number-, Boolean- of JSON-object zijn, plus een optionele reeks sleutelwaardeparen (hash-argumenten) als de laatste parameter(s).

  • De sleutels in knoeiboelargumenten moeten eenvoudige herkenningstekens zijn.

  • De waarden in hash-argumenten zijn Handlebars-expressies: eenvoudige id's, paden of tekenreeksen.

  • De huidige context, this, is altijd beschikbaar aan helpers Handlebars.

  • De context kan een String, Number, boolean of een JSON-gegevensobject zijn.

  • Het is mogelijk om een binnen de huidige context genest voorwerp als context, zoals this.url of this.id over te gaan (zie volgende voorbeelden van eenvoudige en blokhelpers).

  • De helpers van het blok zijn functies die van overal in het malplaatje kunnen worden geroepen. Ze kunnen een blok van de sjabloon telkens nul of meer keer aanroepen met een andere context. Ze bevatten een context tussen {{#name}} en {{/name}}.

  • Handlebars verstrekt een definitieve parameter aan helpers genoemd "opties". Het speciale object 'options' bevat

    • Optionele privégegevens (options.data)
    • Optionele sleutel-waarde eigenschappen van de aanroep (options.hash)
    • Mogelijkheid om zichzelf aan te roepen (options.fn())
    • Mogelijkheid om de inverse van zichzelf aan te roepen (options.inverse())
  • Men adviseert dat de inhoud van het Koord van HTML die van een helper wordt teruggekeerd een SafeString is.

Een voorbeeld van een eenvoudige helper van documentatie Handlebars.js:

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

Zou renderen:

<ul>
<li><a href="/posts/hello-world">Publiceren!</a></li>
</ul>

Een voorbeeld van een blokhelper van documentatie 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);

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

Aangepaste SCF-hulplijnen

Aangepaste helpers moeten zowel aan de serverzijde als aan de clientzijde worden geïmplementeerd, vooral wanneer gegevens worden doorgegeven. Voor SCF, worden de meeste malplaatjes gecompileerd en op server-kant teruggegeven aangezien de server HTML voor een bepaalde component produceert wanneer de pagina wordt gevraagd.

Aangepaste hulp op de server

Om een douaneSCF helper op server-kant uit te voeren en te registreren, eenvoudig om de interface TemplateHelper uit te voeren, maak het een OSGi Service en installeer het als deel van een bundel OSGi.

Bijvoorbeeld:

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

Een helper die voor server-kant wordt gecreeerd moet ook voor cliënt-kant worden gecreeerd.

De component wordt re-teruggegeven op de cliënt-kant voor de aangemelde gebruiker, en als de cliënt-zijhelper niet wordt gevonden, verdwijnt de component.

Aangepaste hulp aan clientzijde

De helpers aan de clientzijde zijn Handlebars-scripts die zijn geregistreerd door Handlebars.registerHelper() aan te roepen.
Bijvoorbeeld:

custom-helpers.js

function(Handlebars, SCF, $CQ) {

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

})(Handlebars, SCF, $CQ);

De aangepaste client-side helpers moeten worden toegevoegd aan een aangepaste clientbibliotheek.
Clilib moet:

  • Een afhankelijkheid opnemen van cq.social.scf
  • Laden nadat handgrepen zijn geladen
  • inbegrepen

Opmerking: de SCF-helpers worden gedefinieerd in /etc/clientlibs/social/commons/scf/helpers.js.

Essentiële ⇐ Aanpassing aan server-side bezig jj.
Aanpassing aan clientzijde☐

Op deze pagina