Handlebars, whitespace control

handlebars registerhelper
handlebars each object
handlebars nested each
handlebars if string contains
handlebars triple braces
link handlebars
handlebars map
handlebars inline if

i want fine control of whitespace but still have readable templates.

Just wanted to see if other's solution to by simple use case.

{{name}}
{{#if age}}
  , {{age}}
{{/if}}

# outputs {{name}} , {{age}}
# desire: {{name}}, {{age}}

https://github.com/wycats/handlebars.js/issues/479 - submitted a ticket which was closed.

Following the history from the pull request to add this feature it looks like this is the correct syntax:

<h4>
{{~#object~}}

Surrounding whitespace would be removed.

{{/object}}
</h4>

Result:

<h4>Surrounding whitespace would be removed.</h4>

There is also this syntax which trims only leading whitespace:

<h4>
{{~#object}}

Only leading whitespace would be removed.

{{/object}}
</h4>

Result:

<h4>Only leading whitespace would be removed.
</h4>

Expressions, Whitespace Control. Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. Handlebars: Whitespace Control By default the line change for standalone tags will be removed. If you wanna remove more line changes or spaces, you can use ~ in left or right side of a tag. This is a handlebars.js extension, mustache do not support this.

Just a comment to Brian answer, If you want to trim whitespace AND do not want handlebars to escape your expression at the same time, the correct syntax to be used is:

{{~{EXPRESSION}~}}

(trimming whitespace before and after the expression while not escaping it)

Handlebars Cookbook, Handlebars: Whitespace Control. By default the line change for standalone tags will be removed. If you wanna remove more line changes or spaces, you can  # Whitespace Control Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. When applied all whitespace on that side will be removed up to the first handlebars expression or non-whitespace character on that side.

You can add a Handlebars Helper to trim() whitespace

{{#-}}

Surrounding whitespace would be removed.

{{/-}}

more background info: https://github.com/wycats/handlebars.js/pull/336

Use handlebars whitespace control · Issue #4305 · emberjs/ember.js , In handlebars 1.1 whitespace control was introduced. Simply, for any mustache expression you may add ~ after opening brackets or before  The other whitespace control deviations from handlebarsjs (block helpers, comments, partials) can be added in the future. The high-level solution for these is easy to understand, but the implementation may be a little tricky.

The Handlebar's Whitespace Control Documentation can be found here: https://handlebarsjs.com/guide/expressions.html#whitespace-control

Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. When applied all whitespace on that side will be removed up to the first handlebars expression or non-whitespace character on that side.

These two, comma-list examples would have the same output:

Case 1:

  {{#each listItems as |item index|}}
    {{#if (eq index 0)}}
      {{~item.name~}}
    {{else~}}
      , {{item.name~}}
    {{/if}}
  {{/each}}

Case 2:

  {{#each listItems as |item index|}}
    {{#if (eq index 0)~}}
      {{item.name}}
    {{~else~}}
      , {{item.name}}
    {{~/if}}
  {{/each}}

Whitespace control inconsistent with Handlebars.js · Issue #113 , Using "~" after opening braces strips the whitespace both before and after the mustache statement, while it should leave whitespace after  Hi, does Handlebars support anything like Jinja2 Whitespace Control which removes leading or trailing whitespace from blocks {{name}} {{#if age}} , {{age

I think the cleanest implementation of this would be to add {{"\n"~}} where you want a hard-stop on new lines.

The "\n" can technically be anything except for empty, ie "". I used "\n" to make it clear what I am doing in the editor.

Example

Three empty lines after this



{{"\n"~}}







Three empty lines before this


Two empty lines before this. No empty lines after this.


{{~"\n"~}}


No empty lines before this.

Result

Three empty lines after this



Three empty lines before this


Two empty lines before this. No empty lines after this.No empty lines before this.

Basically, as others have said, any helper can be prefixed or suffixed with ~. Here, I've decided to pass a value that won't render as the helper ("\n") which allows us to pass ~ freely to control before and after whitespace.

Edit

Alternatively:

Handlebars.registerHelper(
  'singleLineOnly',
  function (options) { // "this" cannot be provided to inline function!
    return options.fn(this).replace(/[\r\n]+/gm, '')
  }
)
Handlebars.registerHelper(
  'singleSpaceOnly',
  function (options) { // "this" cannot be provided to inline function!
    return options.fn(this).replace(/\s\s+/g, ' ')
  }
)

Which will allow you to take something like this:

{{#each this}}
  {{#singleLineOnly}}
  {{#singleSpaceOnly}}

  {{calculatedAmount}}

  {{!an example comment}}
  {{#if unitOfMeasure.translate}}
    {{{unitOfMeasure.translate.value}}}
  {{/if}}

  {{!some random comment}}
  {{#unless unitOfMeasure.translate}}
    {{{unitOfMeasure.value}}}
  {{/unless}}

  {{!Some random comment}}
  {{#ifNotEquals (lowerCase product.value) "other"}}
    {{!If translated, use translated UOM}}
    {{#if product.translate}}
      {{{product.translate.value}}}
    {{/if}}
    {{!If not translated, use default UOM}}
    {{#unless product.translate}}
      {{{product.value}}}
    {{/unless}}
  {{/ifNotEquals}}

  {{!just some more logic for example}}

  {{#ifNotEquals (lowerCase ingredient.value) "other"}}
    {{!If translated, use translated UOM}}
    {{#if ingredient.translate}}
      {{{ingredient.translate.value}}}
    {{/if}}
    {{!If not translated, use default UOM}}
    {{#unless ingredient.translate}}
      {{{ingredient.value}}}
    {{/unless}}
  {{/ifNotEquals}}
  <br/>

  {{/singleSpaceOnly}}
  {{/singleLineOnly}}
{{/each}}

And end up with this:

1/2 oz. first ingredient <br/>
1 pump(s) another ingredient <br/>
3/4 oz. this ingredient <br/>
2 shot(s) that ingredient <br/>
last instruction <br/>

{{#singleLineOnly}} and {{#singleSpaceOnly}} can be used as a wrapper for any text. You'll most likely want to use these with ~ for additional before/after whitespace control. For example: {{~#singleLineOnly~}}

CONGA - Handlebars quickstart, You can control whitespace handling around handlebar expressions by inserting ~ at the beginning or end of the  It annoys me and apparently many others that handlebars does not strip extra whitespace around its elements when compiling. wycats/handlebars.js#336 This is a quick hack to make it strip that extra whitespace as if the rows with only a single hbs tag were not separate rows.

Handlebars, whitespace control - whitespace - iOS, Handlebars, whitespace control - whitespace. h4> There is also this syntax which trims only leading whitespace: <h4> {{~#object}} Only leading whitespace​  Needed: a way of handling whitespace for producing correct output from readable templates in an environment where newlines and whitespace are significant. The problem is that the ~ whitespace handling does not work well when using handlebars to generate indent-sensitive text (such as CoffeeScript or YAML or markdown).

handlebars-trim, Need to figure out where to trim handlebars whitespace? This might help. Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Testbed for handlebars whitespace trimming, This page describes all of the Handlebars helpers supported on the Stencil The following helpers provide control structures that test for conditions, and branch The text is rendered using a monospace font and preserves whitespace and  DUILU Motorcycle Handlebar Switch, 25 mm Hand Control Switch fit for Harley,Honda 400, Yangtze River 750 Horn Turn Signal Ignition Control 4.0 out of 5 stars 5 $34.89 $ 34 . 89

Comments
  • Super valid question for anyone using the :empty css selector as whitespace invalidates it.
  • As a note, if you want all whitespace removed on looping constructs (like #each), you may need to add tildes on the closing tag as well: {{~#each collection~}}{{~/each~}}
  • You should have read the link you sent properly. On Oct 15 2013 the syntax was locked as tilde and it was planned as a part of the language (it is now). So e.g. {{#if something~}} a {{~/if}} removes whitespaces between the opening tag and a, and then between a and closing tag. The background info is good. The answer itself is rather poor and should be deleted or edited. Downvoting.
  • A lot has changed, that's for sure. But this was released in Nov '13