Feb 12, 2014 – By Robert Jackson

We are pleased to announce that both Ember.js 1.4.0 and the first beta in the 1.5 series have been released. This comes as the fourth cycle of our six-week release process that began after 1.0 was released.

New features in 1.4

Property Brace Expansion

In prior versions of Ember if you wanted to observe both foo and bar on baz you would need to setup both baz.foo and baz.bar as dependent keys.

var obj = Ember.Object.extend({
  baz: {foo: 'BLAMMO', bar: 'BLAZORZ'},

  something: function(){
    return this.get('baz.foo') + ' ' + this.get('baz.bar');
  }.property('baz.foo', 'baz.bar')
});

With the new property brace expansion, you could setup the computed properties dependencies instead like:

  something: function(){
    return this.get('baz.foo') + ' ' + this.get('baz.bar');
  }.property('baz.{foo,bar}')

This allows much less duplication/redundancy when your dependent keys are mostly similar.

See the original PR #3538 for more details.

Ember.run.bind

Ember.run.bind provides a useful utility when integrating with non-Ember libraries that provide asynchronous callbacks.

Ember utilizes a run-loop to batch and coalesce changes. This works by marking the start and end of Ember-related JavaScript execution.

When using events such as a View's click handler, Ember wraps the event handler in a run-loop, but when integrating with non-Ember libraries this can be tedious.

For example, the following is rather verbose but is the correct way to combine third-party events and Ember code.

var that = this;
jQuery(window).on('resize', function(){
  Ember.run(function(){
    that.handleResize();
  });
});

To reduce the boilerplate, the following can be used to construct a run-loop-wrapped callback handler.

jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));

For more details please reference the recently added run-loop guide (much thanks to Brendan Briggs).

With Controller

The {{with}} helper can now accept a controller option. Adding controller='something' instructs the {{with}} helper to create and use an instance of the specified controller with the new context as its content.

This is very similar to using the itemController option with the {{each}} helper.

{{#with users.posts controller='userBlogPosts'}}
  {{!- The current context is wrapped in our controller instance }}
{{/with}}

In the above example, the template provided to the {{with}} block is now wrapped in the userBlogPost controller, which provides a very elegant way to decorate the context with custom functions/properties.

Lazily Bound Attributes

Previously, every attribute that was bound added some degree of cost (mostly associated with maintaining the bindings/observers themselves). This lead us to limit the list of attributes that were automatically bound for Ember.TextField, Ember.TextArea, and friends. This is a common source of frustration as more and more people want to bind to HTML5 attributes, but find that to do so they must reopen the Ember.TextField class and add the attributes they need.

This might look like:

Ember.TextField.reopen({
  attributeBindings: ['autofocus']
});

Then from the template:

{{input autofocus=omgAutofocusMe}}

This certainly is not ideal, and causes many issues for people that expect it to "just work".

Thankfully, this has gotten MUCH better with the 1.4 release. In 1.4 any attribute bindings that do not exist at the time the view is first rendered will not have observers setup (therefore removing the original performance concern), but if/when the attribute is set on the view later (after the first render) an observer is setup at that time.

This means that we are only creating observers for actual properties that are present, but we can list every valid HTML attribute in the attributeBindings property so that you can use them without having to reopen internal classes.

As of Ember 1.4 you should be able to use any HTML5 attribute with {{input type="text"}}, {{textarea}}, and {{checkbox}}.

Other Improvements

As usual, there are a ton of bug fixes and small improvements in this release. You can see a list of all the changes in the CHANGELOG:

• Ember.js 1.4.0 CHANGELOG
• Ember.js 1.5.0-beta.1 CHANGELOG