devanthe.dev

Ember 1.11.0 Release, New bind-attr Syntax and More

1 min read

On March 27th, Matthew Beale posted on EmberJS.com that a new release of Ember was out, Ember 1.11.0. I am extremely excited to see this release because of one specific feature, the new bind-attr syntax.

New, simple way

Previously Ember developers had to use the bind-attr syntax to declare an attribute binding to an HTML element. This syntax is ugly:

1{% raw %}
2<div {{bind-attr class="color"}}>
3{% endraw %}

Ugly right? With the release of 1.11.0 came a new syntax that looks like this:

1{% raw %}
2<div class="{{color}}"></div>
3{% endraw %}

The new syntax also includes an inline if helper:

1{% raw %}
2 <div class="{{color}} {{if isEnabled 'active' 'disabled'}}"</div>
3{% endraw %}

Some attributes allow you you to pass a literal value:

1{% raw %}
2<input disabled={{isDisabled}}>
3{% endraw %}

These are great changes that make it just a little bit easier to understand reading Ember; especially those new to Ember. In addition to these changes came a new each with index:

1{% raw %}
2{{#each people as |person index|}}
3 <div>{{index}}: {{person.name}}</div>
4{{/each}}
5{% endraw %}

Note: The first value in the indices will always be "0".

You can read the announcement of Ember 1.11.0 for a brief list of changes and a link to the official CHANGELOG