2022.2

ExamplesofcustomHelpers
Coloring a negative value
Valuesinyourdatacouldbepositiveornegative.Let'ssayyouwantaHelperthatcolorsanynegative
valuesred.Here'sthecodeforsuchaHelper.
Handlebars.registerHelper('highlightNegative', function ( value ) {
let result = value
if( -1 === Math.sign(value) ) {
result = '<span style="color:red">' + value + '</span>';
}
return new Handlebars.SafeString(result);
})
ThenameoftheHelperishighlightNegative.TheHelpercheckswhetherthevaluethatitgetspassed
byanexpressionisnegative,usingaJavaScriptfunction:Math.sign()(seethedocumentationofMoz-
illa).Ifitis,itwrapsthevalueinaSpanwithastyleattributethathassomeCSStocolorthevaluered.
Onceyou'veaddedthisHelper,itcanbeusedinanyexpressionthatreturnsanumbervalue.
Example: {{highlightNegativeTotal}}
ThisexpressioncallstheHelperwiththenameofadatafield,Total,thathasanumber.Ifthevalueof
thedatafieldis-15,theoutputofthisexpressionwillbe-15.
Inserting a hyperlink
Let'sassumeyouhavehyperlinksinyourdataaswellastextstouseaslabelforthehyperlinks.For
example:
[
{
"url": "http://www.nu.nl",
"label": "nu.nl"
}
]
ThefollowingcoderegistersaHelpercalledmakeHyperlinkthatwillturnthesevaluesintoahyperlink
inthetext.
Handlebars.registerHelper('makeHyperlink', function () {
let result = `<a href="${this.url}">${this.label}</a>`;
return new Handlebars.SafeString( result );
})
Inthetemplateyouwouldcallthefunctioninanexpression.
Page 338