createViewChannelSubscriber<T, R>

FUNCTION

A function that creates an ViewChannelSubscriber which you can provide to an ViewChannel, which maps all ViewChannelEvent to methods.

You provide createViewChannelSubscriber with an object with all the events you want to handle as methods and it will call the methods for you. This way your code will not have any switch or if-statement to distinguish between events.

For example if you wanted to handle the DISMISSED event, you provide a method called onDismissed within the config. Whenever the DISMISSED event occurs onDismissed will be called.

All methods are called with two parameters: the first is the event that occurred and the second the ViewChannel the event occurred on.

createViewChannelSubscriber should only be used when using Vanilla JavaScript or TypeScript and not when using a reactive framework because reactive frameworks (such as React or Vue) will handle the DOM manipulation for you.

If an event is fired that you did not provide a method for, an SubscriberMissingMethodError error will be thrown.

Since 1.5.0

Signature

Parameters

Returns

A subscriber function which can be passed to an ViewChannel.

Examples

A. Simple example

The example below shows what the subscriber could look like for a modal channel which presents and dismisses modal windows.

import {
  ViewChannel,
  createViewChannelSubscriber
} from 'uiloos/core';

const subscriber = createViewChannelSubscriber({
  onPresented() {
    // Show the view here
  },

  onDismissed() {
    // Hide the view here
  },
});

export const modalChannel = new ViewChannel(
  {},
  subscriber
);

B. All methods implemented

Here is a nice example to get started which includes stub implementations for all method:

const subscriber = createViewChannelSubscriber({
  onInitialized(event, viewChannel) {
    console.log('onInitialized', event, viewChannel);
  },

  onPresented(event, viewChannel) {
    console.log('onPresented', event, viewChannel);
  },

  onDismissed(event, viewChannel) {
    console.log('onDismissed', event, viewChannel);
  },

  onDismissedAll(event, viewChannel) {
     console.log('onDismissedAll', event, viewChannel);
  },

  onAutoDismissPlaying(event, viewChannel) {
    console.log('onAutoDismissPlaying', event, viewChannel);
  },

  onAutoDismissPaused(event, viewChannel) {
    console.log('onAutoDismissPaused', event, viewChannel);
  },

  onAutoDismissStopped(event, viewChannel) {
    console.log('onAutoDismissStopped', event, viewChannel);
  },

  onDataChanged(event, viewChannel) {
    console.log('onDataChanged', event, viewChannel);
  },
});