Ember 1.0 RC6

– By Michael Madrid

Ember.js 1.0 RC6 has been released and is available from the main website and at builds.emberjs.com. This release features two big changes: 1) router update 2) Ember Components.

Router Update

The biggest change is router update (aka "router facelift"), which addresses two major issues. The first was inconsistent semantics between URL-based transitions and transitionTo. The second was spotty async support which made it difficult to prevent or delay route entry in cases such as authentication and async code-loading.

We have now harmonized URL changes and transitionTo semantics and more fully embraced asynchrony using promises.

Additionally, router transitions have become first-class citizens and there are new hooks to prevent or decorate transitions:

willTransition: fires on current routes whenever a transition is about to take place beforeModel/model/afterModel: hooks fired during the async validation phase

Finally there is an error event which fires whenever there is a rejected promise or error thrown in any of the beforeModel/model/afterModel hooks.

For more on new router features, see:

Special thanks to Alex Matchneer for his work on this!

Ember Components

The other major change is the introduction of Ember Components, which shares Web Components' goal of facilitating creation of reusable higher-level page elements.

Ember Components will generally consist of a template and a view which encapsulate the template's property access and actions. Any reference to outside constructs is handled through context info passed into the view. Components can be customized through subclassing.

Ember Components naming conventions are: 1) the template's name begins with 'components/', and 2) the Component's name must include a '-' (this latter convention is consistent with Web Components standards, and prevents name collisions with built-in controls that wrap HTML elements). As an example, a component might be named 'radio-button'. Its template would be 'components/radio-button' and you would call it as {{radio-button}} in other templates.

Stay tuned for more docs and examples of this exciting new feature.