Ember.js 1.9.0 and 1.10 Beta released

We are happy to announce the release of the first beta version in the Ember.js 1.9.0 and 1.10 series. This is the ninth cycle of the release process that we started after the 1.0 release.

Version 1.9 represents the efforts of at least 52 contributors in more than 436 commits.

The road to Ember 2.0

In early November, Tom, Yehuda and the Ember.js core team shared The road to Ember 2.0. This RFC document serves as a mapping for several versions of Ember.js.

Ember.js 1.9 introduced several important deprecations, heralding upcoming changes. In addition, many internal structures of the view layer have been reconstructed to take advantage of the “flow” observation mode.

Ember.js 1.10 (beta) started a series of versions that will introduce new APIs and deprecate APIs that will be removed in 2.0.

To this end, with great excitement, We are very happy to announce the introduction of HTMLBars template engine into Ember.js 1.10. This new rendering pipeline marks an important milestone for the framework, and by maintaining complete API compatibility, it proves our commitment to stability without stagnation.

New features and deprecations in Ember.js 1.9

Handlebar 2.0

As Announced in October, Ember.js 1.9 added support for Handlebars 2.0 templates and removed support for Handlebars 1.x templates. This change will not affect the template syntax or public APIs of the Ember application.

Projects using Ember-CLI versions lower than 0.1.5 will require a Handlebars dependency version:

bower install --save handlebars#2.0.0

In addition, the template pre-compiler (installed via npm) will need to be updated:

npm uninstall --save-dev broccoli-ember-hbs-template-compiler
npm install --save-dev ember-cli-htmlbars@0.6.0

Non-CLI applications also need to increase their Handlebars dependent version.


Data binding in Ember.js is traditionally based on the concept of key-value observers. In Ember 1.x, KVO observers are triggered immediately when values ​​change, giving them performance characteristics that cannot be changed until Ember 2.0. In contrast, streams distinguish between change notifications and value calculations. The value of the stream can be described as “lazy” because it is only calculated when needed.

Adding streams to Ember and its use in the entire view layer improves rendering performance, simplifies many helpers, and prepares Ember’s code base for HTMLBars.

Thank you @_mmun, @ebryn, with @Chrisdon Who wrote the Ember.js streaming implementation, and then updated each Handlebars helper to the new API.

Activation and deactivation events

Ember.js routing has been supported for a long time activate with deactivate hook. E.g:

// app/routes/index.js
export default Ember.Route.extend({
  activate: function(){

Ember.js 1.9 introduced corresponding events for these hooks.

// app/routes/index.js
export default Ember.Route.extend({
  collectAnalytics: function(){

Thank you @pangratz Used to add this feature.

Pause testing

When debugging Ember acceptance tests, it can be helpful to pause and check the DOM or application status. Ember.js 1.9 adds a new test assistant for suspending test execution indefinitely.

test('clicking login authenticates', function(){
  return pauseTest();
  // The test will never proceed to execute this click

Thank you @katiegengler Used to add this feature.

Up and down key operations

This {{input}} with {{textarea}} The assistant in Ember will make several actions, including enter, insert-newline, escape-press, focus-in,
focus-out, with key-press.

Introduction to this release key-up with key-down action. E.g:

{{! call the `validateName` action on the current controller
    or component scope: }}
{{input value=name key-up="validateName"}}

Performance improvement

Ember.js 1.9 brings several performance improvements.

Thank you @stefanpenner Thank him for his continuous efforts in performance tuning.

Notable deprecation

With the development of Ember.js, various APIs have been deprecated to allow them to be removed in future major versions (such as 2.0).This
Deprecated pages Summarizes the deprecation situation and demonstrates how to update to the new API.

Ember 1.9 deprecated context switching in templates. Templates with context switching are difficult to read, and the concept is challenging for new developers. Ember 2.0 removes context switching from templates in order to make the scope consistent and predictable. This deprecation is a step towards this goal.

Two Ember assistants support context switching.the first is {{each}}:

{{!-- app/templates/people.hbs --}}
{{! this context is the controller }}
{{#each model}}
  {{name}} {{! this context is each person }}

The non-context switching version of this assistant is now preferred:

{{!-- app/templates/people.hbs --}}
{{! this context is the controller }}
{{#each person in model}}
  {{person.name}} {{! this context is still the controller }}

The second helper is {{with}}:

{{!-- app/templates/people.hbs --}}
{{! this context is the controller }}
{{#with model}}
  {{name}} {{! this context is the person }}

The non-context switching version of this assistant is now preferred:

{{!-- app/templates/people.hbs --}}
{{! this context is the controller }}
{{#with model as person}}
  {{person.name}} {{! this context is still the controller }}

New features and deprecations in Ember.js 1.10

Ember.js 1.10 marks the migration of Ember’s rendering pipeline from a string-based process to a DOM-based process. Existing application templates can run HTMLBars without modificationEmber’s DOM-based rendering pipeline and the new syntax enabled by HTMLBars will be implemented in the next few versions.

Before entering the 1.10 beta, HTMLBars will be available for nearly two weeks after the canary feature logo. We thank the community members for taking time from work or weekends to test changes and provide feedback.

Decompose the HTMLBars project into incremental delivery to ensure that the existing code base can be jumped without modification. This version lays the foundation for future features and greater performance improvements.

Input and feedback from the actual 1.10 beta version will help us ensure a smooth transition to release.

To test your Ember-CLI code base on Ember.js 1.10 and HTMLBars, follow these steps to upgrade Ember:

rm -rf bower_components
bower install --save ember#beta
bower install

Then update your template compiler to HTMLBars:

npm uninstall --save-dev broccoli-ember-hbs-template-compiler
npm install --save-dev ember-cli-htmlbars

In the beta cycle, we hope to see 3rd party libraries and build pipeline updates to support HTMLBar.If you manage the project and encounter any difficulties, please contact the community and core team forum or #ember-dev IRC chat room.

Block parameters

Block parameters are a new feature introduced in 1.10. They solved two problems in Ember:

  • Non-context switch version {{#each}} with {{#with}} Inconsistent.
    {{#each car in cars}} with {{#with model as car}} Have similar meanings but different syntax.
  • Ember’s components are strictly encapsulated. Explicitly pass in the value, and only emit actions from the component. The inability to pass values ​​makes the combination of components difficult.

The block parameter adds a template syntax that allows values ​​to be generated from an helper or component to a sub-scope.The new syntax makes the named value version {{#each}} with {{#with}} continuous. E.g:

{{currentUser.name}} {{! available on the controller }}
{{#each cars as |car|}}
  {{#with car.manufacturer as |make|}}
    {{currentUser.name}} {{! still the controller scope }}

Preserving the template scope context makes the template easier to read.

Any component in Ember 1.10 can use this feature. E.g:

{{!-- app/templates/components/my-unordered-list.hbs --}}
  {{#each items as |item|}}
    <li>{{yield item}}</li>
{{!-- app/templates/index.hbs --}}
{{#my-unordered-list items=cars as |car|}}
  Auto: {{car.name}}

This my-unordered-list Component is called, passed cars As items. The component template iterates through each item in items, The use of block parameters yields to the calling template.The call template accepts block parameters as car And display the car name.

thank you very much @_mmun Used to realize this important new function.

Rename the published file

A version of Ember.js contains three files:

  • ember.prod.js -An unminified production version (no assertions)
  • ember.min.js -A reduced production version
  • ember.js -Development and build (with assertion)

The performance of the non-production version of Ember is not as good as the production version.To ensure that there is no confusion
ember.js Build in a production environment, Ember.js 1.10 and later will use the new file name:

  • ember.prod.js -An unminified production version (no assertions)
  • ember.min.js -A reduced production version
  • ember.debug.js -Development and build (with assertion)

One ember.js The documentation will continue to provide deprecation warnings.

Significant deprecation in 1.10

The following deprecation plan is released with Ember.js 1.10:

  • Set up childViews The attributes on the view definition will be deprecated in 1.10. E.g:
var ChildB = Ember.View.extend();

export default Ember.ContainerView.extend({
  childViews: [ 'childA', ChildB ],
  childA: Ember.View.extend()

This use childViews It is inconsistent with other uses of the entire Ember, so it is difficult to achieve with good performance. It is preferred to explicitly create the view during initialization:

var ChildB = Ember.View.extend();

export default Ember.ContainerView.extend({
  init: function(){
  childA: Ember.View.extend()

As the features included in Ember 1.11 are developed, additional deprecations may be added in version 1.10.

Change log

Leave a Reply

Your email address will not be published. Required fields are marked *