Event Data
Sending event data to consumers is an important feature of the WireBootstrap data event system.
To pass a custom object as part of an event, use the
data method on the data event.const product = { sku: "SKU0001" }
const dataevent = new wire.data.DataEvent("myevent")
.data(product);
dataevent.raise();
The data can then be retrieved from the object passed into the data event listener callback using the
data attribute.wire.data.listen().event("myevent").when((config) => {
const data = config.data;
console.log(data.sku);
});
The data event system is used extensively by WireBootstrap components to communicate with one another about the changes a user is making on a page as they interact with the components. Components can receive notifications of changes in other components and react accordingly if they are displaying data that may be affected by a user interaction.
Components receive their data as WireBootstrap data tables. The wire.data.DataEvent class contains methods that allow provider components to send out events with the components of their data that was changed or otherwise affected by a user interaction.
In the example below, a new
dataselect.wire event is raised and the cell method on the data event is used to store an individual data point contained inside a data table.const table = new wire.data.DataTable([
{"product", "SKU001", month: "May", sales: "200"}
]);
...
new wire.data.DataEvent()
.dataselect()
.cell("product", "SKU001")
.raise();
Other methods allow the event to contain more data about the
dataselect.wire event supplying the table column, the table row, and the table itself as additional context about the user's selection using methods with the same name. ...
ev.table(table);
ev.column(table.getColumn("product"));
ev.row(table.Rows[0]);
...
Consumers can qualify the events in which they are interested by specifying a number of data elements when setting up the listener.
In the example below, the consumer is listening for
dataselect.wire events but only on ones that concern the product column on a structured data event. Also seen below, the callback method when parameter now contains the data elements sent by the provider that raised the data event.wire.data.listen().dataselect().column("product").when((config) => {
const data = config.data;
const cell = data.cell;
const col = data.column;
const row = data.row;
const table = data.table;
...
})