Seamlessly connect between the front-end and your CBWIRE back-end.

Lifecycle Hooks

CBWIRE gives you the opportunity to execute JavaScript during certain events.
Called when a component has been initialized on the page by Livewire
Called when Livewire initializes an individual element
Called before Livewire updates an element during its DOM-diffing cycle after a network roundtrip
Called after Livewire updates an element during its DOM-diffing cycle after a network roundtrip
Called after Livewire removes an element during its DOM-diffing cycle
Called when a Livewire update triggers a message sent to the server via AJAX
Called if the message send fails for some reason
Called when a message has finished its roudtrip, but before Livewire updates the DOM
Called after Livewire processes all side effects (including DOM-diffing) from a message
document.addEventListener("DOMContentLoaded", () => {
cbwire.hook('component.initialized', (component) => {})
cbwire.hook('element.initialized', (el, component) => {})
cbwire.hook('element.updating', (fromEl, toEl, component) => {})
cbwire.hook('element.updated', (el, component) => {})
cbwire.hook('element.removed', (el, component) => {})
cbwire.hook('message.sent', (message, component) => {})
cbwire.hook('message.failed', (message, component) => {})
cbwire.hook('message.received', (message, component) => {})
cbwire.hook('message.processed', (message, component) => {})

Interacting With Component

You can interact with your CBWIRE component, calling actions, setting data properties, and more, using cbwire.find. Once you have a reference to the component, you can interact with it using the methods below.
document.addEventListener("DOMContentLoaded", () => {
var component = cbwire.find('#args._id#'); // args._id contains the id of our component
var count = component.count; // gets the value of a data property called 'count'
component.count = 5; // updates the values of a data property
component.increment(); // calls the increment action on our component
component.addTask( 'someTask' ); // calls the addTask action and passes parameters 'increment' ); // same as increment call above
// On someEvent, console log
component.on( 'someEvent', function() {
console.log('Got someEvent');
} );
component.emit('someEvent', 'foo', 'bar'); // emits someEvent and pass parameters
} );