Documentation

API Referenceclass

class ObservableEvent

An object that represents an event, to be emitted on an ObservableObject.

class ObservableEvent<
  TSource extends ObservableObject = ObservableObject,
  TData extends Record<string, unknown> = Record<string, unknown>,
>;

Description

Events can be emitted on instances of ObservableObject, and handled using a callback passed to ObservableObject.listen() or ObservableObject.attach().

In most cases, instances of ObservableEvent are created by ObservableObject.emit() itself, when provided with just the event name and data (if any). When handling events, the implicitly created ObservableEvent will be passed to the handler.

Types — Events are identified by their name at runtime. In the application source code, a specific event can be identified using the type arguments of ObservableEvent. These refer to the source object type and data object, respectively — e.g. ObservableEvent<MyView, { foo: number }>, which is a type definition for an event emitted by instances of MyView, with name Foo and a data object that includes a foo number property.

Change events — The ObservableObject.emitChange() method can be used to emit events with a change property in the data object. This is a common pattern for notifying listeners about changes in the object’s state, and will also trigger bindings to update the value of any bound properties.

Examples

// Emitting an event from an observable object
let obj = Object.assign(new ObservableObject(), { foo: "bar" });
obj.emit("Foo");
obj.emit("Foo", { baz: 123 })

// Handling events from an attached object
class MyObject extends ObservableObject {
  constructor() {
    super();
    this.foo = this.attach(new Foo(), (e) => {
      // ... handle event on attached foo object
    })
  }
  foo: MyFooObject;
}

// Handling delegated UI events
function MyView(v: Binding<MyActivity>) {
  return UI.List(
    v.bind("items"),
    UI.Row(
      // ...
      UI.Button("Remove").onClick("RemoveItem")
    )
  )
)
class MyActivity extends Activity {
  // ...
  items: SampleData[];
  onRemoveItem(e: UIListViewEvent) {
    let item = e.data.listViewItem;
    // ...here:
    // item refers to the SampleData object
    // e.source refers to a button
  }
}

Constructor

Instance members