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