Docs (4.0.0)
Event handling

class ManagedEvent

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

class ManagedEvent<TSource extends ManagedObject = ManagedObject, TData extends Record<string, unknown> | undefined = Record<string, unknown> | undefined, TName extends string = string>

Description

Events can be emitted on instances of ManagedObject, and handled using ManagedObject.listen(), Observer, or a change callback to ManagedObject.attach() or ManagedObject.autoAttach().

In most cases, instances of ManagedEvent are created by ManagedObject.emit() itself, when provided with just the event name and data (if any). When handling events, the implicitly created ManagedEvent 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 ManagedEvent. These refer to the source object type, data object, and name, respectively — e.g. ManagedEvent<MyView, { foo: number }, "Foo">, 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.

Several types are already defined, such as DelegatedEvent, ViewEvent, UIListView.ItemEvent, and ManagedList.ChangeEvent.

Alternatively a sub class can be defined, such as ManagedChangeEvent, if a type of event may be used with different names.

Delegation — If an object handles an event by re-emitting the same event on its own, but both the original source object and the delegating object should be available, a new event should be created that includes the delegate property. The original source can be traced back using the source property, while the second object is available as delegate. Refer to DelegatedEvent and the example below.

Forwarding and intercepting events — When an event is forwarded or intercepted by a preset view (using on... properties of the object passed to e.g. ui.cell({ ... })), the original event is stored in the inner property.

Examples

// Emitting an event from a managed object
let obj = ManagedRecord.create({ foo: "bar" });
obj.emit("Foo");
obj.emit("Foo", { baz: 123 })
// Handling change events from an attached object
class MyObject extends ManagedObject {
  constructor() {
    super();
    this.autoAttach("foo", (foo, e) => {
      // ...either foo property is set directly, OR
      // a change event `e` was emitted
    })
  }
  foo: MyFooObject;
}
// Handling delegated UI events
const BodyView = (
  ui.list(
    { items: bind("items") }
    ui.row(
      // ...
      ui.button("Remove", "RemoveItem")
    )
  )
)
class MyActivity extends Activity {
  // ...
  items: SampleData[];
  onRemoveItem(e: UIList.ItemEvent<SampleData>) {
    // ...here:
    // e.source refers to a button
    // e.delegate refers to a list item view (wrapper)
    // e.delegate.item refers to the SampleData object
    // e.inner is the original event emited by the button
  }
}

Constructor

Instance Members

  • name readonlyThe name of the event, should start with a capital letter.
  • source readonlyThe object that’s emitted (or will emit) the event.
  • data readonlyObject that contains arbitrary event data (if any).
  • delegate readonlyAn object that delegated the event, if any, e.g. UIForm or UIListView.ItemControllerView.
  • inner readonlyThe original event, if the event was intercepted or propagated.