Ember 1.11.0 Release, New bind-attr Syntax and More

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:

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

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

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

The new syntax also includes an inline if helper:

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

Some attributes allow you you to pass a literal value:

{% raw %}
<input disabled={{isDisabled}} />
{% 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:

{% raw %}
{{#each people as |person index|}}
  <div>{{index}}: {{person.name}}</div>
{{/each}}
{% 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