Created
December 6, 2015 12:04
-
-
Save AmilKey/ed35f2c7c081f48b7009 to your computer and use it in GitHub Desktop.
COMPONENT LIFECYCLE HOOKS Ember 2.0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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