Ember 2.0

Upgrade Path

@yink

bower install --save ember#1.13.10

Ember 1.13

Ember 1.13

new_features.length === 0

Math.floor(new_features.length) === 0

Notable Deprecations

  • Views
  • Controllers
  • Obtuse syntax
  • Routing

Difference between

views and components?

To be honest, if I could start over I would keep Ember.View private and just make Ember.Component what everyone learned. Components are just views configured to not shoot yourself in the foot (and by that I mean they don’t inherit scope based on where they’re used in templates; you must pass state in explicitly) ...

... components have exactly the same features as views, just with better default settings and better API usability. (Look at the implementation of Ember.Component, you’ll see it’s a relatively simple subclass of Ember.View.)
{{! app/templates/show-menu.hbs }}
{{view.title}}
// app/views/show-menu.js
import Ember from "ember";

// Usage: {{view "show-menu"}}
export default Ember.View.extend({
  templateName: 'some-menu',
  title: 'My Menu'
});
{{! app/templates/components/show-menu.hbs }}
{{title}}
// app/components/show-menu.js
import Ember from "ember";

// Usage: {{show-menu}}
export default Ember.Component.extend({
  title: 'My Menu'
});

Before

After

Legacy Ember.Select

{{view 'select'}}

Controllers

Controller's Responsibilities

  • Persisting application state
  • Decorating templates with data

Services

Components

// From

export default Ember.ArrayController.extend({

  filteredBudgetPlans: Ember.computed('@each.merchant', function() {
    // ...
  }),
})


// To

export default Ember.Controller.extend({
  // prepend properties with 'model'
  filteredBudgetPlans: Ember.computed('model.@each.merchant', function() {
    // ...
  }),
})

ArrayController, Object Controller

// From

export default Ember.Controller.extend({
  needs: ['application'],

  unsortedMerchants: Ember.computed.alias('controllers.application.merchants')
});

// To

export default Ember.Controller.extend({
  application: Ember.inject.controller(),

  unsortedMerchants: Ember.computed.alias('application.merchants')
});

needs

Obtuse Syntax

{{! old obtuse syntax}}
<div {{bind-attr class="isCommentsVisible:comments-box:hide"}}>
</div>



{{! much better!! }}
<div class="{{if isCommentsVisible 'comments-box' 'hide'}}">
</div>

bind-attr

Router

// From

Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
    this.resource("comments", { path: "/comments" }, function() {
      this.route("new", { path: "/new" });
    });
  });
});


// To

Router.map(function() {
  this.route("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
    this.route("comments", {
      path: "/comments",
      resetNamespace: true
    }, function() {
      this.route("new", { path: "/new" });
    });
  });
});

this.resource

Questions

ember 2.0 upgrade path

By yinquanteo

ember 2.0 upgrade path

  • 873