doc(lifecycles): WIP document lifecycle #458
Conversation
Use v2 as a template
|
Part of Improving vCurrent docs #456 |
| | Lifecycle Callback | Description | | ||
| | :--- | :--- | | ||
| | `constructor` | When the framework instantiates a component, it calls your class's constructor, just like any JavaScript class. This is the best place to put basic initialization code that is not dependent on bindable properties. | | ||
| | `created` | The "created" hook runs just after the constructor and can be treated very similarly. The only difference is that the component's `Controller` has been instantiated and is accessible through the `$controller` property, for advanced scenarios. | |
There was a problem hiding this comment.
Need to remove the bit about the Controller since that's a new thing for au2.
There was a problem hiding this comment.
I've removed it, but the existing docs mention a controller, just not that its accessible via $controller.
| | `constructor` | When the framework instantiates a component, it calls your class's constructor, just like any JavaScript class. This is the best place to put basic initialization code that is not dependent on bindable properties. | | ||
| | `created` | The "created" hook runs just after the constructor and can be treated very similarly. The only difference is that the component's `Controller` has been instantiated and is accessible through the `$controller` property, for advanced scenarios. | | ||
| | `bind` | If your component has a method named "bind", then the framework will invoke it when it has begun binding values to your bindable properties. In terms of the component hierarchy, the bind hooks execute top-down, from parent to child, so your bindables will have their values set by the owning components, but the bindings in your view are not yet set. This is a good place to perform any work or make changes to anything that your view would depend on because data still flows down synchronously. This is the best time to do anything that might affect children as well. | | ||
| | `attached` | If your component has a method named "attached", then the framework will invoke it when it has fully attached your HTML element to the document, along with its children. In terms of the component hierarchy, the attached hooks execute top-down. | |
There was a problem hiding this comment.
These execute bottom up.
There was a problem hiding this comment.
My lifecycle demo
https://codesandbox.io/embed/aurelia-lifecycle-demo-yy1tc?expanddevtools=1&autoresize=1&fontsize=18&hidenavigation=1&module=%2Fsrc%2Fapp.html&view=preview
shows
- constructor = top-down
- created = bottom-up
- bind = top-down
- attached = top-down
There was a problem hiding this comment.
Hmm. For some reason I thought attached executed bottom up. Of course, I could be getting confused now that we have top-down and bottom-up lifecycles in v2. Thanks for verifying!
There was a problem hiding this comment.
We have been hurt by vcurrrent top-down attached.
In parent attached callback, we use setTimeout or taskQueue to ensure to run code AFTER all children DOM is attached.
It should be the other way around. I think Aurelia 2 fixed this design. Correct me if I am wrong, in Aurelia 2, attached is now bottom-up, attaching is top-down.
There was a problem hiding this comment.
That's correct @3cp .
There was a problem hiding this comment.
@baerrach please add some explanation to this wrong design, plus some info on the altered design in upcoming Aurelia 2. We kept the wrong design in Aurelia vcurrent to avoid breaking change.
There was a problem hiding this comment.
@3cp added known issues section with your recommendation
|
|
||
| To tap into any of these hooks, simply implement the method on your class. | ||
|
|
||
| <div style="border: thick solid red; border-radius: 12px; padding: 16px;"> |
There was a problem hiding this comment.
The signatures have changed in v2 for sure.
| | :--- | :--- | | ||
| | `constructor` | When the framework instantiates a component, it calls your class's constructor, just like any JavaScript class. This is the best place to put basic initialization code that is not dependent on bindable properties. | | ||
| | `created` | The "created" hook runs just after the constructor and can be treated very similarly. The only difference is that the component's `Controller` has been instantiated and is accessible through the `$controller` property, for advanced scenarios. | | ||
| | `bind` | If your component has a method named "bind", then the framework will invoke it when it has begun binding values to your bindable properties. In terms of the component hierarchy, the bind hooks execute top-down, from parent to child, so your bindables will have their values set by the owning components, but the bindings in your view are not yet set. This is a good place to perform any work or make changes to anything that your view would depend on because data still flows down synchronously. This is the best time to do anything that might affect children as well. | |
There was a problem hiding this comment.
Need @bigopon to verify the timing of the bind hook. It's different between au1 and au2, so some of these details don't apply here. @bigopon has worked with the au1 code around this area most recently I believe. If I recall, the bind hook sort of takes place in the middle of the binding process. I don't remember if the bindings in the view are set up or not actually.
Use v2 as a template