Ember 1.11.0 has dropped and it has come with several new features that we should all start using. I mentioned briefly in my Ember components post that I was looking forward to the day of not having to use the bind-attr syntax. Well that day has come.

Here are my favorite new features in the Ember 1.11.0 release in no particular order.

Bound Attribute Syntax

In the past us Ember developers were left using the bind-attr syntax whenever we needed to bind element attributes. Now that day has gone. Here is an example.

<div class="{{color}}"></div>  

Now we can simply just add the color variable directly into the class attribute. You can also pass literals in as well if needed.

It's worth mentioning that with the new HTMLBars bound attribute syntax that there is a concern over XSS attacks. In some instances like bound style attributes you'll get a warning when the value is marked unsafe.

On the other hand these examples just work.

{{! Works as expected }}
<a class="{{someProperty}}"></a>

{{! Works as expected, and escapes unsafe urls }}
<a href="{{someProperty}}"></a>

{{! Works as expected, and escapes unsafe urls }}
<img src="{{someProperty}}"></a>  

If needed there is a Ember.String.htmlSafe function that you can use to escape strings. It's good to keep this in mind.

Inline If

Another feature is inline ifs. Instead of having to do an if/else block param now the truthy and falsy values can be passed as params. This will replace the block form.

{{if isEnabled 'active' 'disabled'}}

If isEnabled is true then 'active' else 'disabled'.

Each With Index

This is another nice little feature. Now we can keep track of the index while iterating through any array. The second parameter is optional to the {{each}} block.

{{#each people as |person index|}}
  {{! The first index value will be 0 }}
  <div>{{index}}: {{person.name}}</div>

Component Helper

Component helpers is another great new feature. What this does it allows you to pass in a computed property as a parameter to your component. John Fisher had a great example of this at Atomic Object. Essentially they had several components each with its own UI they used in their templates. To display the correct component they used a series of nested if statements. John gave a few examples on how they worked around this issue before component helpers existed.

Below is an example of using a component helper.

{{component colorComponentName}}

In the example above colorComponentName is a property that could have several values. As the property changes so does the rendered component. All the logic can be inside the computed property to determine the component.

Performance Improvements

Since EmberConf 2015 there has been a greater emphasis on performance. Although the new Glimmer rendering engine won't land until Ember.js 1.13 we are still seeing incremental performance increases on every release.

This latest release has increased list rendering performance by twenty percent and view instance creation by double. This is great news, and it makes me glad that the core contributors have continued to work on it.


Have you used the new Ember 1.11.0 features yet? Please tweet me if you have.

Image Credit OpenShift