8

Can't understand how to escape { or } symbols standing next to expression at handlebars java templating engine.

I'm using handlebars templates to generate plain text so I can't use HTML ASCII codes of braces as advised there.

I need expression like \{{{variable.name}}\} to be resolved to {variable.value}. Should I create helpers for that or there is a cleaner way?

hatesms
  • 750
  • 1
  • 9
  • 27

4 Answers4

4

Here are some examples of escaping. The last method escape with a helper (when the other methods are not possible).

$(document).ready(function () {
  var context = {
    "textexample1" : "hello",
    "textexample2" : "<div><b>hello</b></div>",
    "textexample3" : "{ 'json' : 'sample }"
  };
  Handlebars.registerHelper('surroundWithCurlyBraces', function(text) {
    var result = '{' + text + '}';
    return new Handlebars.SafeString(result);
  });
 var source   = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
Simple text : {{textexample1}}<br/>
Html text not escaped : {{textexample2}}<br/>
Html text escaped : {{{textexample2}}}<br/>
Json text : {{textexample3}}<br/>
Non JSON text with surrounding mustaches {} : { {{textexample1}} }<br/>
Non JSON text with surrounding mustaches (no space)  : &#123;{{textexample1}}&#125;<br/>
Solution with helper : {{#surroundWithCurlyBraces textexample1}}{{/surroundWithCurlyBraces}}
</script>
<br/>
<div id="resultPlaceholder">
</div>
Christophe
  • 2,131
  • 2
  • 21
  • 35
  • I can't add space or other character between surrounding mustashes and double brackets. Template should be resolved as {variable.value} exactly – hatesms Aug 27 '18 at 08:24
  • I've added a solution for you : use the html code for {} ({ and }). The answer was updated accordingly – Christophe Aug 27 '18 at 08:32
  • I can't use HTML ASCII. I specified it in question. This is plain text generator so no other rendering after template resolved. – hatesms Aug 27 '18 at 08:38
  • Then the only solution I see is to build a helper that will add your curly braces around the computed text. Do you need the code ? – Christophe Aug 27 '18 at 08:42
  • 1
    I've updated the answer again with a solution that uses a helper. – Christophe Aug 27 '18 at 08:54
  • 3
    Thanks! I already have a solution with helper but it look like overhead for me. Still looking for a simplier solution. No easy way to escape symbol in template is disappointment – hatesms Aug 27 '18 at 14:04
  • See my question https://stackoverflow.com/questions/55035670, it includes an ugly but working way of inserting `{` and `}` without an additional helper. – pvgoran Mar 15 '19 at 05:14
2
{{myvar}}{{append '' '}'}}

append helpers from here: https://www.npmjs.com/package/handlebars-helpers#string

Luca Carducci
  • 173
  • 1
  • 9
2

Had the same issue. Managed to make it work with a hack like this: {{ curlyOpen }}{{ variable.name }}{{ curlyClose }} Where you should define additional variables curlyOpen="{" and curlyClose="}" as part of your context.

FVlad
  • 307
  • 5
  • 11
0

I bumped into this.

In the end, adding a helper function was the easiest solution.

I enhanced the solution suggested by @Christophe since I also needed the camelCase version of the given parameter:

Handlebars.registerHelper('surroundWithCurlyBraces', function(text, camelCase) {
  
  return new Handlebars.SafeString(surroundWithCurlyBraces(camelCase? _.camelCase(text): text));
});

Then you can call it as follows:

{{surroundWithCurlyBraces variable.name}}

or - if you need camelCase

{{surroundWithCurlyBraces variable.name true}}
Erik
  • 31
  • 2