CBWIRE provides lifecycle methods you can hook into to update and render your components.
The lifecycle methods are executed in the following order when a component is initially loaded:
onSecure()
onMount()
onRender()
Lifecycle methods are executed in this order for subsequent AJAX requests.
onSecure()
onHydrate[DataProperty]()
onHydrate()
onUpdate[DataProperty]()
Runs before all other lifecycle methods to enforce security rules. Return false to halt processing and render an empty div, or return nothing to continue normally.
onSecure() fires on every request—both initial rendering and all subsequent AJAX requests. This ensures security checks run continuously throughout the component's lifecycle.
It runs only once when a component is initially wired. This can inject data values into your component via params you pass in when calling wire(), or pulling in values from the RC or PRC scopes.
onMount() only fires when the component is initially rendered and does not fire on subsequent requests when your component re-renders. This can cause issues referencing things such as the RC or PRC scope. If you pass in values with the RC or PRC scope, you must store them as data properties to ensure they are available to your component in subsequent requests.
It runs on all requests before rendering your component. This gives you more control if needed when rendering. There is also a renderIt() alias, which does the same.
Runs on subsequent requests after a component is hydrated but before are rendered, before a is updated or is performed, or before the component is rendered.
Runs on subsequent requests after a specific data property is hydrated but before computed properties are rendered, before an action is performed, or before the component is rendered.
Runs on subsequent requests after any is updated using wire:model or $set.
Runs on subsequent requests after a is updated using wire:model or $set. It only runs when the targeted data property is updated.
Runs automatically when a file upload encounters an error (any HTTP response with a non-2xx status code). This allows you to handle upload failures gracefully in your CBWIRE components.
Fire actions
onRender()
property
string
The name of the data property associated with the file input
errors
any
The error response from the server. Will be null unless the HTTP status is 422, in which case it contains the response body
multiple
boolean
Indicates whether multiple files were being uploaded (true) or a single file (false)
class extends="cbwire.models.Component" {
data = {
"someValue: ""
};
function onMount( event, rc, prc, params ){
data.someValue = params.someValue;
}
}component extends="cbwire.models.Component" {
data = {
"someValue: ""
};
function onMount( event, rc, prc, params ){
data.someValue = params.someValue;
}
}function onSecure( event, rc, prc, isInitial, params ) {
// Check if user is authenticated
if ( !auth.check() ) {
return false;
}
}function onMount( event, rc, prc, params ){
data.someValue = params.someValue;
}function onRender() {
return "<div>direct html</div>;
// return template( _getViewPath() ); // CBWIRE's default method
// return template( "some.custom.path" );
}function onHydrate( data ) {
// Note that computed properties have not yet rendered
data.hydrated = true;
}data = {
"count": 1
};
function onHydrateCount( data ) {
// Note that computed properties have not yet rendered
data.count += 1;
} function onUpdate( newValues, oldValues ) {
// ....
}data = {
"count": 1
};
function onUpdateCount( newValue, oldValue ) {
if ( newValue >= 100 ) {
// Reset back to 1
data.count = 1;
}
}function onUploadError( property, errors, multiple ) {
// Set error state
data.uploadFailed = true;
// Create user-friendly error message
data.errorMessage = "Failed to upload " & ( multiple ? "files" : "file" );
// Log the error for debugging
if ( !isNull( errors ) ) {
writeLog( type="error", text="Upload error for #property#: #serializeJSON(errors)#" );
}
}