Skip to content

Use handlebars whitespace control #4305

Closed
@ioleo

Description

@ioleo

In handlebars 1.1 whitespace control was introduced.

Simply, for any mustache expression you may add ~ after opening brackets or before closeing brackets, to indicate that all whitespace before/after the expression should be trimmed.

Eg.

{{#each item in list }}
  <div>{{ item }}</div>
{{/each}}

will render each line as <div>Item</div> - which sometimes may break the layout (e.g. if the blocks are display: inline-block, they will have unwanted empty spaces between them)

Since handlebars 1.1, we can fix this by adding whitespace control:

{{#each item in list ~}}
  <div class="inline-block">{{ item }}</div>
{{~/each}}

However, when I tried to use this in my ember app, i am getting error:

Warning: Running "emberTemplates:dist" (emberTemplates) task
    >> Error: Parse error on line 6:
    >> ...ss="headers">    {{~#each goal in forec
    >> ----------------------^
    >> Expecting 'ID', 'DATA', got 'INVALID'
    Warning: Ember Handlebars failed to compile app/templates/forecast.hbs. Use --force to continue.

The related emberTemplates:dist Grunt task:

emberTemplates: {
  options: {
    templateName: function (sourceFile) {
      var templatePath = yeomanConfig.app + '/templates/';
      return sourceFile.replace(templatePath, '');
    }
  },
  dist: {
    files: {
      '.tmp/scripts/compiled-templates.js': '<%= yeoman.app %>/templates/{,*/}*.hbs'
    }
  }
},

Looks like ember-handlebars does not allow whitespace control?

My project deps:

  "dependencies": {
    "ember": "1.3.1",
    "ember-data": "1.0.0-beta.5"
    "handlebars": "~1.3.0",
    "jquery": "~2.0.3"
  },
``

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions