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 douaneSCF helpers die met AEM Communities worden geleverd worden bepaald in de cliëntbibliotheek:

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 WCM wijzetegen een koord gescheiden lijst van wijzen test.

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 Internationaliserend Koorden in de Code van JavaScript.

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.

Deze methode laat het middel programmatically worden aangepast gemakkelijker dan voor een middel dat als knoop JCR wordt toegevoegd mogelijk is. Zie toevoegen of omvatten een Component van Gemeenschappen.

Er zijn slechts enkele onderdelen van de Gemeenschappen beschikbaar die u wilt opnemen.

Deze helper, aangewezen slechts op server-kant, verstrekt functionaliteit gelijkend op cq:omvatvoor manuscripten JSP.

Parameters parameters-6

Voorbeeld example-4

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

Bevat een nieuwe commentaarcomponent 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, aangewezen slechts op server-kant, verstrekt functionaliteit gelijkend op ui:includeClientLibvoor manuscripten JSP.

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: deze helper is geen validator en mag 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 helpen tegen XSS beschermen.

OPMERKING: deze helper is geen validator en mag niet worden gebruikt voor het schrijven van actiefattributen (href, src, gebeurtenishandlers).

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 de koordinhoud van JavaScript helpen tegen XSS beschermen.

OPMERKING: deze helper is geen validator en mag niet worden gebruikt voor het schrijven naar willekeurige 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: deze hulpfunctie 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">Post!</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 aan de serverzijde en client-kant 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 hulp van douaneSCF op server-kant uit te voeren en te registreren, voer eenvoudig de interface Java™ TemplateHelperuit, maak het een OSGi Diensten 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 Handlebars.registerHelper() aan te roepen.
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-hulplijnen worden gedefinieerd in /etc/clientlibs/social/commons/scf/helpers.js .