Skip to content

Instantly share code, notes, and snippets.

@AmilKey
Created December 6, 2015 12:04
Show Gist options
  • Select an option

  • Save AmilKey/ed35f2c7c081f48b7009 to your computer and use it in GitHub Desktop.

Select an option

Save AmilKey/ed35f2c7c081f48b7009 to your computer and use it in GitHub Desktop.
COMPONENT LIFECYCLE HOOKS Ember 2.0
COMPONENT LIFECYCLE HOOKS
A number of new component lifecycle hooks have been introduced to Ember 1.13. Using these hooks allows you to write data down, action up (DDAU) style components today, despite the two-way data binding of curly components.
On first render (in order):
didInitAttrs runs after a component was created and passed attrs are guaranteed to be present. In Ember 1.13, the attributes will be available as this.get('attrName').
didReceiveAttrs runs after didInitAttrs, and it also runs on subsequent re-renders, which is useful for logic that is the same on all renders. It does not run when the component has been re-rendered from the inside.
willRender runs before the template is rendered. It runs when the template is updated for any reason (both initial and re-render, and regardless of whether the change was caused by an attrs change or re-render).
didInsertElement runs after the template has rendered and the element is in the DOM.
didRender runs after didInsertElement (it also runs on subsequent re-renders).
On re-render (in order):
didUpdateAttrs runs when the attributes of a component have changed (but not when the component is re-rendered, via component.rerender, component.set, or changes in models or services used by the template).
didReceiveAttrs, same as above.
willUpdate runs when the component is re-rendering for any reason, including component.rerender(), component.set() or changes in models or services used by the template.
willRender, same as above
didUpdate runs after the template has re-rendered and the DOM is now up to date.
didRender, same as above.
Note that a component is re-rendered whenever:
any of its attributes change
component.set() is called
component.rerender() is called
a property on a model or service used by the template has changed (including through computed properties).
Because of the Glimmer engine, these re-renders are fast, and avoid unnecessary work.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment