Hjälpmedel för SCF-handtag scf-handlebars-helpers

Handlister Hjälpprogram är metoder som kan anropas från Handlebars-skript för att underlätta arbetet med SCF-komponenter.

Implementeringen innehåller en definition på klientsidan och en serversida. Det är också möjligt för utvecklare att skapa anpassade hjälpprogram.

De anpassade SCF-hjälpen som levereras med AEM Communities definieras i klientbibliotek:

Förkortning abbreviate

En hjälp som returnerar en förkortad sträng som uppfyller egenskaperna maxWords och maxLength.

Strängen som ska förkortas anges som kontext. Om inget sammanhang anges returneras en tom sträng.

Först trimmas kontexten till maxLength och sedan delas kontexten upp i ord och reduceras till maxWords.

Om safeString är true är den returnerade strängen SafeString.

Parametrar parameters

Exempel 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

Ett hjälpmedel för att lägga till två intervall under en div, ett för den fullständiga texten och det andra för den mindre texten, med möjlighet att växla mellan de två vyerna.

Parametrar parameters-1

Exempel 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

En hjälp som returnerar en formaterad datumsträng.

Parametrar parameters-2

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

Lika med equals

En hjälpfunktion som returnerar innehåll beroende på ett likhetsvillkor.

Parametrar parameters-3

Exempel 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

En blockhjälp som testar det aktuella värdet för WCM-läge mot en strängavgränsad lista med lägen.

Parametrar parameters-4

Exempel example-2

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

i18n i-n

Den här hjälpen åsidosätter Handlebars help 'i18n'.

Se även Internationalisering av strängar i JavaScript-kod.

Parametrar parameters-5

Exempel example-3

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

Inkludera include

En hjälp som du kan använda för att inkludera en komponent som en icke-befintlig resurs i en mall.

Detta gör att resursen kan anpassas programmatiskt enklare än vad som är möjligt för en resurs som lagts till som en JCR-nod. Se Lägg till eller inkludera en webbgruppskomponent.

Endast ett urval av webbgruppskomponenter kan inkluderas. För AEM 6.1 är de som ingår kommentarer, värdering, recensioneroch röstning.

Den här hjälpen, som bara är lämplig på serversidan, har funktioner som liknar cq:include för JSP-skript.

Parametrar parameters-6

Exempel example-4

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

Detta kommer att innehålla en ny kommentarkomponent på this.id + /comments

IncludeClientLib includeclientlib

En handledare som innehåller ett AEM HTML-klientbibliotek, som kan vara ett js, en css eller ett temabibliotek. För flera inkluderingar av olika typer, till exempel js och css, måste den här taggen användas flera gånger i Handlebars-skriptet.

Den här hjälpen, som bara är lämplig på serversidan, har funktioner som liknar ui:includeClientLib för JSP-skript.

Parametrar parameters-7

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

Vackert pretty-time

En hjälpfunktion som visar hur mycket tid som har gått upp till en brytpunkt, efter vilken ett vanligt datumformat visas.

Till exempel:

Parametrar parameters-8

Exempel 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

En hjälp som kodar en källsträng för HTML-elementinnehåll för att skydda mot XSS.

OBS! det här är inte en validerare och ska inte användas för att skriva attributvärden.

Parametrar parameters-9

Exempel example-6

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

Xss-htmlAttr xss-htmlattr

En hjälpskrivare som kodar en källsträng för skrivning till ett HTML-attributvärde för att skydda mot XSS.

OBS! det här är inte en validerare och ska inte användas för att skriva åtgärdbara attribut (href, src, händelsehanterare).

Parametrar parameters-10

Exempel example-7

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

Xss-jsString xss-jsstring

En hjälp som kodar en källsträng för skrivning till JavaScript-stränginnehåll för att skydda mot XSS.

OBS! detta är inte en validerare och ska inte användas för att skriva till godtycklig JavaScript.

Parametrar parameters-11

Exempel example-8

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

Xss-validHref xss-validhref

En hjälp som sanerar en URL som kan skrivas som ett HTML href- eller srce-attributvärde för att skydda mot XSS.

OBS! detta kan returnera en tom sträng

Parametrar parameters-12

Exempel example-9

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

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

Ett exempel på en enkel hjälp från Handlebars.js-dokumentationen: 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);

Återger:

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

Ett exempel på en blockhjälp från Handlebars.js-dokumentationen: 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);

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

Anpassade SCF-hjälpredor custom-scf-helpers

Anpassade hjälpprogram måste implementeras både på serversidan och på klientsidan, särskilt när data skickas. För SCF kompileras och återges de flesta mallar på serversidan när servern genererar HTML för en viss komponent när sidan begärs.

Anpassade hjälpmedel på serversidan server-side-custom-helpers

Implementera och registrera en anpassad SCF-hjälp på serversidan genom att implementera Java-gränssnittet TemplateHelper, gör det till en OSGi Service och installera det som en del av ett OSGi-paket.

Till exempel:

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

Anpassade hjälpmedel på klientsidan client-side-custom-helpers

Hjälpprogram på klientsidan är Handlebars-skript som registreras genom att anropa Handlebars.registerHelper().
Till exempel:

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 anpassade hjälpfilerna på klientsidan måste läggas till i ett anpassat klientbibliotek.
Klientlib måste:

Obs! Hjälpprogrammen för SCF definieras i /etc/clientlibs/social/commons/scf/helpers.js.