Ember 2.0

Upgrade Path

@yink

Ember 1.13

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'}}

https://www.npmjs.com/package/ember-legacy-views

Controller's Responsibilities

• Persisting application state
• Decorating templates with data

// 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

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



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

bind-attr

// 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