在车把的标签中转义花括号

Question

I have handlebar code that prints out a list of labels.

This values are:

{{#each theObj.Options}} 

{{#if @last}}
{{this.valueLabel}}
{/if}}

{{#unless @last}}
{{this.valueLabel}, 
{{/unless}}

{{/each}}.

</p>{{/compare}}

The valueLabels are:

Value A
 Value B
 {Test}

The handlebar code prints out:

The values are: Value A, Value B, .

I need to get the last {Test} to print out. How do I do that? The printout should be:

The values are: Value A, Value B, {Test}.

Thanks.

Answer 1

Setting this up in a quick Code Pen seemed to yield the desired result. This is with three caveats:

1. I added an extra '{' to line 7 of your HTML, previously: '{/if}}'.
2. I removed the closing '{{/compare}}' tag as there was no opening one included in your example.
3. I created an object 'theObj' with a guess at a reasonable example of what should be included in there.

Could you clarify what is in the 'theObj' object so we can troubleshoot that?

HTML

<div id="app"></div>

<script id="entry-template" type="text/x-handlebars-template">
  This values are:

  {{#each theObj.Options}} 

  {{#if @last}}
    {{this.valueLabel}}
  {{/if}}

  {{#unless @last}}
    {{this.valueLabel}}, 
  {{/unless}}

  {{/each}}.
</script>

JavaScript

var theObj = {
  Options: [{valueLabel: 'Value A'}, {valueLabel: 'Value B'}, {valueLabel: '{Test}'}]
};

var source   = document.getElementById('entry-template').innerHTML;
var template = Handlebars.compile(source);

var context = {theObj: theObj};
var html    = template(context);

document.getElementById('app').innerHTML = html;

console.log(html);

You can check out the Code Pen example here:

See the Pen Escaping curly braces in a label in handlebars by Nicholas Lawrence ( @nicholaslawrencestudio ) on CodePen .