Events

Components event callbacks are configured using the events configuration attribute.

User Events

User events are those initiated by a user working with a component. User events can have any name but the data passed into the user event callback will have the same format.

Event Data

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        change: (config) => {
            ...
            // config.base
            // config.data
            // config.component
        }    
    }
});

Life Cycle Events

Ready

The ready event is called when the component is done initialing the first time. This includes retrieving data from a data service if bound to a dataset as well as rendering the component in the DOM.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        ready: (config) => {
            ...
        }                
    }
});

DataBind

The databind event is called each time the component gets new data. If bound to static data such as an array of objects, this event will be called one time at the same time as the ready event. If bound to a dataset, it will be called any time the component receives data updates from the dataset and has made the necessary changes to reflect them in its UI.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {       
        databind: (config) => {
            ...
        }            
    }
});

Fail

The fail event is called when the component fails during one of the life cycle events. This event replaces ready and databind passing in the exception.

const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        fail: (ex) => {
            ...
        }                
    }
});

Note, there is no need to handle the exception object with any type of UI message as this is handled by the component.

For more on component events, visit the wire.ui.Component reference page.

Last updated