Data Events

The code for the following examples are available in the building-a-component project inside the \data-events folder.

In the previous example, Hello World, the binding was static. This means the information displayed inside the component does not change after its initial binding.

Often times its desired that a component react to something a user does in another component on a page. In WireBootstrap, data events can be used to listen for changes to data that may be of interest to a component. Using data events, component data bindings can be dynamic where the data displayed inside a component changes based on other changes on a page.

In the example below, the component sets up a data event listener for an event called my-component-change and then rebinds to the data sent in the event when its fired on the page.

...

// Listen for data event and re-bind
wire.data.DataEventManager.event("my-component-change").when((cfg) => {
    document.getElementById(el).innerHTML = cfg.data.value;
});

...

// Fire data event passing a new 'value'
new wire.data.DataEvent()
  .event("my-component-change")
  .data({ value: "Hello Data Event" })
  .raise();