SCF Handlebars Helpers scf-handlebars-helpers

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-hulplijnen die bij AEM Communities worden geleverd, zijn gedefinieerd in het dialoogvenster clientbibliotheek:

Afkorting abbreviate

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 parameters

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

Inhoud laden content-loadmore

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 parameters-1

Voorbeeld 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

Een hulpmiddel om een geformatteerde datumreeks terug te keren.

Parameters parameters-2

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

Gelijk equals

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

Parameters parameters-3

Voorbeeld 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

Een blokhelper die de huidige waarde van test WCM-modus op een door een tekenreeks gescheiden lijst met modi.

Parameters parameters-4

Voorbeeld example-2

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

i18n i-n

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

Zie ook Tekenreeksen internationaliseren in JavaScript-code.

Parameters parameters-5

Voorbeeld example-3

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

Inclusief include

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 onderdeel van een Gemeenschappen toevoegen of opnemen.

Slechts een paar communautaire componenten zijn inbegrepen. Voor AEM 6.1 zijn de opgenomen opmerkingen, beoordeling, beoordelingen, en stemmen.

Deze helper, die alleen geschikt is aan de serverzijde, biedt functionaliteit die lijkt op cq:include voor JSP-scripts.

Parameters parameters-6

Voorbeeld example-4

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

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

IncludeClientLib 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 helper, die alleen geschikt is aan de serverzijde, biedt functionaliteit die lijkt op ui:includeClientLib voor JSP-scripts.

Parameters parameters-7

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

Nochtans pretty-time

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

Bijvoorbeeld:

Parameters parameters-8

Voorbeeld 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

Een hulpmiddel dat een bronkoord voor HTML elementinhoud codeert helpen tegen XSS beschermen.

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

Parameters parameters-9

Voorbeeld example-6

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

Xss-htmlAttr xss-htmlattr

Een helper die een bronkoord codeert voor het schrijven aan een waarde van het attribuut van HTML om tegen XSS te helpen beschermen.

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

Parameters parameters-10

Voorbeeld example-7

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

Xss-jsString 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 parameters-11

Voorbeeld example-8

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

Xss-validHref xss-validhref

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

OPMERKING: dit kan een lege tekenreeks retourneren

Parameters parameters-12

Voorbeeld example-9

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

Handlebars.js Basic - Overzicht handlebars-js-basic-overview

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

Zou renderen:

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

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

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

Aangepaste SCF-hulplijnen custom-scf-helpers

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 de HTML voor een bepaalde component produceert wanneer de pagina wordt gevraagd.

Aangepaste hulp op de server server-side-custom-helpers

Om een douaneSCF helper op de server uit te voeren en te registreren, voer eenvoudig de interface van Java uit TemplateHelper, maak er een OSGi-service en installeer het als deel van een bundel OSGi.

Bijvoorbeeld:

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

Aangepaste hulp aan clientzijde client-side-custom-helpers

De helpers aan de clientzijde zijn Handlebars-scripts die zijn geregistreerd door het aanroepen van Handlebars.registerHelper().
Bijvoorbeeld:

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

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

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