How to prevent Handlebars to put semicolon in a JS object

Question

I am writing a sprity template and my code generate semi colon:

{{#each layouts}}
{{#each sprites}}

  {{#if dpi}}
    ["@media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi)"]: {
  {{/if}}
  {{snakecase (cssesc ../classname)}}: {
  backgroundImage: url('{{escimage url}}'),
  {{#if dpi}}
      backgroundSize: {{baseWidth}}px {{baseHeight}}px,
  {{/if}}
  },
  {{#if dpi}}
      },
  {{/if}}
{{/each}}
{{/each}}

And here the output.

const sprites = {
 icon_00_element_common: {
backgroundImage: url('/sprites/sprite-00_Element_Common.png'),; //I want to stripe this semicolon
}  //And I want no return at the end
, icon_00_element_topbar: {
  backgroundImage: url('/sprites/sprite-00_Element_TopBar.png'),;
}
...

How to well format a plain JS object with Handlebars?

Answer 1

It could maybe be a bit difficult. Handlebars as you might know is better for rendering HTML than Javascript...

I believe Handlebars is inserting this semicolon because it looks like you are outputting an anonymous Javascript function, and such functions need to be terminated.

In general, I would try to get more control of the template by replacing your 3 sets of {{#if dpi}} with just one if/else block, so you can write the two full cases. That would solve the return issue. Then you need to reformat your code somehow to stop Handlebars from thinking you are writing an anonymous function.

See https://github.com/wycats/handlebars.js/commit/25b8e314afa695125ef769283d43831c20c77e21