Wire Lifecycle
Everything that has a beginning has an end. - The Oracle, Matrix
When a Wire is initially loaded (before any background AJAX requests are performed), the Lifecycle Methods are executed in the following order.
- 1.onMount()
- 2.
- 3.
For background AJAX requests, lifecycle methods are executed in this order.
- 1.onHydrate[DataProperty]()
- 2.onHydrate()
- 3.
- 4.
- 5.
Runs only once when the Wire is initially wired.
This does not fire during subsequent renderings for the Wire.
component extends="cbwire.models.Component" {
data = {
"taskId": 0
};
function onMount( event, rc, prc, parameters ){
data.taskId = event.getValue( "taskId" );
}
}
onMount() replaces what was formerly mount(). The mount() method is deprecated and will be removed in future major releases of CBWIRE.
Runs on subsequent requests, after the Wire is hydrated, but before Computed Properties are rendered, before an Action is performed, or before onRender() is called.
component extends="cbwire.models.Component" {
data = {
"hydrated": false
};
function clicked() {}
function onHydrate( data ) {
// Note that computed properties are not rendered yet
data.hydrated = true;
}
function onRender( args ) {
return "
<div>
<div>Hydrated: #args.hydrated#</div>
<button wire:click='clicked'>Click me</button>
</div>
";
}
}
Runs on subsequent requests, after a specific Data Property is hydrated, but before Computed Properties are rendered, before an Action is performed, or before onRender() is called.
component extends="cbwire.models.Component" {
data = {
"count": 1
};
function onHydrateCount( data ) {
// Note that computed properties are not rendered yet
data.count += 1;
}
}
Runs during the rendering of a Wire. If onRender() is defined on the Wire, CBWIRE will use what is returned as the component's template, otherwise it will perform a lookup for a view template. The
args parameter is provided which contains both the Data Properties and any rendered Computed Properties.component extends="cbwire.models.Component" {
data = {
"rendered": true
};
computed = {
"currentDate": function() {
return now();
}
}
function onRender( args ) {
return "
<div>
<div>Rendered: #args.rendered# at #args.currentDate#</div>
</div>
";
}
}
Last modified 17d ago