Closed
Description
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"
},
``