diff --git a/source/deprecations/v2.x.html.md b/source/deprecations/v2.x.html.md index 3bec1ad094..6618e30e76 100644 --- a/source/deprecations/v2.x.html.md +++ b/source/deprecations/v2.x.html.md @@ -825,7 +825,7 @@ Example object: Ember.Object.extend({ someFun: Ember.K }); -``` +``` Command: @@ -841,4 +841,71 @@ Ember.Object.extend({ }); ``` -If for some reason your app depends on the ability to chain `Ember.K` invocations, you can use the flag `--return-this`. It will replace `Ember.K` with a function that returns `this`. +If for some reason your app depends on the ability to chain `Ember.K` invocations, you can use the flag `--return-this`. It will replace `Ember.K` with a function that returns `this`. + +### Deprecations Added in Pending Features + +#### Arguments in Component Lifecycle Hooks + +##### until: 2.13.0 +##### id: ember-views.lifecycle-hook-arguments + +Previously, it was possible for component lifecycle hooks `didInitAttrs`, `didReceiveAttrs`, and `didUpdateAttrs` to receive arguments. However, this functionality was part of private API. Using the arguments is harmful to component performance, so they will trigger a deprecation. Alternative approaches for all three hooks are below: + +##### `didInitAttrs` arguments + +Since this lifecycle hook is [already deprecated](http://emberjs.com/deprecations/v2.x/#toc_ember-component-didinitattrs), we suggest taking this chance to address two deprecations at the same time. + +Imagine you have a component that stores a timestamp when it is initialized. + +Before: + +``` javascript +Ember.Component.extend({ + didInitAttrs({ attrs }) { + this.set('initialTimestamp', attrs.timestamp); + } +}); +``` + +After: + +``` javascript +Ember.Component.extend({ + init() { + this._super(...arguments); + + this.set('initialTimestamp', this.get('timestamp')); + } +}); +``` +##### `didReceiveAttrs` and `didUpdateAttrs` arguments + +This example for `didReceiveAttrs` below also applies to `didUpdateAttrs`, a similar hook that only runs on re-renders. Let's say you want to animate a thermometer widget showing the change between today's high and low temperatures. + +Before: + +``` javascript +Ember.Component.extend({ + didReceiveAttrs({ oldAttrs, newAttrs }) { + if (oldAttrs.temp !== newAttrs.temp) { + this.thermometer.move({ from: oldAttrs.temp, to: newAttrs.temp }); + } + } +}); +``` + +After: + +``` javascript +Ember.Component.extend({ + didReceiveAttrs() { + let highTemp = this.get('_highTemp'); + let lowTemp = this.get('_lowTemp'); + + if (highTemp !== lowTemp) { + this.thermometer.move({ from: highTemp, to: lowTemp }); + } + } +}); +```