using HTL + Handlebars + displaying $ sign

[jayv25585659]

I am moving one of our in-house apps that uses Coldfusion to Adobe AEM. the pages extensively use handlebars for displaying content.

my problem is that I have this code in my HTML: ${{fees-here}}

I want to display the $ sign before the price but this causes the HTL processor/parser errors.

I am using one of 2 options at the moment:

• remove the dollar sign
• put a space in between $ and the curly braces (trying not to use this as horizontal space is a premium in the app)

I am hoping that there's a 3rd option so that the prices are displayed as "$344" (without any spaces in between the $ sign and the price).

Thank you!

[BrianKasingli · Accepted solution]

@jayv25585659,

Have you tried passing the dollar integer value into a handlebars helper?

// something like below.;;

Handlebars.registerHelper('currency', function(amount, options) {
  if (typeof(amount) === 'string') { amount = options.contexts[0].get(amount); }
  var rounded = Math.round(amount * 100);
  var dec = rounded % 100;
  var whole = rounded / 100 - dec / 100;
  var decStr = '' + dec;
  return '$' + whole + '.' + decStr + ( decStr.length < 2 ? '0' : '');
});

var t = Handlebars.compile("{{currency amount}}");

t({amount: 0.15});

Original post -> https://gist.github.com/kayleg/5215127

Checkout this other post -> https://stackoverflow.com/questions/14492098/handlebars-function-to-format-currency-with-javascript

[Nikhil-Kumar]

@jayv25585659  - I would recommend to make use of Sling Models to manipulate any kind of data and use it in HTL then.